提交 aa21a8cf authored 作者: 龙菲's avatar 龙菲

优化文物列表、增加修改文物馆藏单位、增加文物上传记录弹窗

上级 7aed45b2
......@@ -58,7 +58,7 @@ export default {
position: relative;
height: 100%;
.video-dom {
height: auto;
height: 100%;
width: 100%;
}
.modal {
......
<template>
<el-dialog
:visible="dialogVisible"
width="70%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
>
<div class="title" slot="title">
<div class="divider"></div>
<span class="label">导入记录</span>
</div>
<div class="upload-progress">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
</div>
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<template v-slot:fileSize="scope">
{{ getFileSize(scope.scope.fileSize) }}
</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>
</div>
<div class="dialog-footer">
<el-button type="primary" @click.native="handleClose" >关闭</el-button>
</div>
</el-dialog>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { importRecordsTitle, importOperates, importOperations } from "../config";
import { getImportListPage, deleteByBatchNum } from "@/api/file";
import SearchBar from "@/components/SearchBar";
export default {
name: "ImportRecordDialog",
components: {
TablePage,
TableOperation,
SearchBar,
},
props: {
visible: {
type: Boolean,
default: false,
},
filesList: {
type: Array,
default: () => [],
},
},
watch: {
visible: {
handler: function (value) {
this.dialogVisible = value;
},
deep: true,
immediate: true,
},
},
computed: {
tableTitle() {
return importRecordsTitle;
},
tableOperates() {
return importOperates;
},
tableOperations() {
return importOperations;
},
getFileSize(fileSize) {
return (fileSize) => {
console.log(fileSize);
return (Number(fileSize) / 1024 / 1024).toFixed(2) + "M";
};
},
},
data() {
return {
dialogVisible: false,
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
searchForm: {
name: "",
status: "",
},
searchConfig: [
{
prop: "type",
type: "select",
label: "所属分类",
selectOptions: [
{
label: "文物",
value: "biz_cultural_relic",
},
{
label: "展览",
value: "biz_exhibition",
},
],
},
{
prop: "batchNum",
type: "input",
label: "批次",
},
],
};
},
mounted() {
this.loadData();
},
methods: {
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
...form,
};
let res = await getImportListPage(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 getImportListPage(params);
if (res.code == 0) {
this.list = res.data;
}
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
this.editVisible = true;
break;
case "view":
break;
case "delete":
let { batchNum, type,id } = row;
let deleteRes = await deleteByBatchNum({ batchNum, type });
if (deleteRes.code == 0) {
this.$message.success("删除成功!");
this.loadData();
}
break;
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
handleClose() {
this.$emit("handleClose");
},
},
};
</script>
<style lang='scss' scoped>
.title {
display: flex;
.divider {
width: 8px;
height: 16px;
border-left: 4px solid #409eff;
margin-right: 8px;
}
.label {
font-weight: bold;
}
}
.dialog-content {
padding: 0 32px;
display: flex;
flex-direction: column;
}
.dialog-footer {
margin-top: 30px;
display: flex;
justify-content: flex-end;
}
.el-dialog__body {
padding: 0 20px 30px 20px;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.pagination {
margin: 16px;
}
</style>
\ No newline at end of file
......@@ -110,6 +110,16 @@
label="请输入文物数量"
></el-input-number>
</el-form-item>
<el-form-item label="馆藏单位" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择馆藏单位"
>
</el-cascader>
</el-form-item>
<el-form-item label="馆藏介绍" :label-width="formLabelWidth">
<el-input
type="textarea"
......@@ -321,6 +331,11 @@ export default {
}
});
}
// 回填馆藏单位
if (this.dialogForm.deptId) {
this.dialogForm.deptId = [this.dialogForm.deptId];
}
},
immediate: true,
deep: true,
......@@ -354,6 +369,13 @@ export default {
checkStrictly: true, //单选选择任意一级选项
},
dialogVisible: false,
orgTreeData: [],
optionProps: {
value: "id",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
};
},
async created() {
......@@ -367,6 +389,10 @@ export default {
]);
this.culturalRelicTextureType = res.culturalRelicTextureType;
this.culturalRelicYears = res.culturalRelicYears;
this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
this.orgTreeData = res[0].children; //去掉根节点的文旅厅
});
},
methods: {
// 关联文献查询
......@@ -510,7 +536,10 @@ export default {
this.reset();
}
} else {
console.log("this.dialogForm", this.dialogForm);
const params = { ...this.dialogForm };
// debugger
// return
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
// return;
......@@ -523,6 +552,11 @@ export default {
params.textureType =
params.textureType[params.textureType.length - 1].trim();
}
// 处理行政区划
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
let res = await editCulturalRelic(params);
let deleteRes = await deleteFiles(deleteFileArr);
if (res.code == 0 && deleteRes.code == 0) {
......
export const title = [{
prop: "name",
label: "名称",
width: 100,
columnAlign: 'center',
},
// {
// prop: "level",
// label: "文物级别",
// columnAlign: 'center',
// },
// {
// prop: "detailSize",
// label: "尺寸",
// columnAlign: 'center',
// },
// {
// prop: "textureType",
// label: "质地",
// columnAlign: 'center',
// },
// {
// prop: "type",
// label: "类别",
// width: 100,
// columnAlign: 'center',
// isCulturalRelicType:true
// },
// {
// prop: "createId",
// label: "创建人",
// columnAlign: 'center',
// },
// {
// prop: "createTime",
// label: "创建时间",
// columnAlign: 'center',
// },
},
// {
// prop: "level",
// label: "文物级别",
// columnAlign: 'center',
// },
// {
// prop: "detailSize",
// label: "尺寸",
// columnAlign: 'center',
// },
// {
// prop: "textureType",
// label: "质地",
// columnAlign: 'center',
// },
// {
// prop: "type",
// label: "类别",
// width: 100,
// columnAlign: 'center',
// isCulturalRelicType:true
// },
// {
// prop: "createId",
// label: "创建人",
// columnAlign: 'center',
// },
// {
// prop: "createTime",
// label: "创建时间",
// columnAlign: 'center',
// },
{
{
prop: "deptName",
label: "馆藏单位",
columnAlign: 'center',
},
{
},
{
prop: "regionName",
label: "所属地",
width: 100,
columnAlign: 'center',
},
{
},
{
prop: "intro",
label: "馆藏介绍",
columnAlign: 'center',
showOverFlowToolTip: true
},
showOverFlowToolTip: true,
width: 120,
},
{
{
prop: "themeWord",
label: "主题词",
width: 100,
columnAlign: 'center',
},
{
},
{
prop: "faceImageUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
},
{
},
{
prop: "status",
label: "上下架状态",
width: 100,
columnAlign: 'center',
isStatus: true
},
{
prop: "num",
label: "数量",
width: 100,
columnAlign: 'center',
},
},
{
{
prop: "loveCount",
label: "点赞量",
width: 100,
columnAlign: 'center',
},
{
sortable: true
},
{
prop: "collectCount",
label: "收藏量",
columnAlign: 'center',
},
{
columnAlign: 'center', sortable: true
},
{
prop: "browseCount",
label: "浏览量",
columnAlign: 'center',
},
columnAlign: 'center', sortable: true
},
{
{
prop: "sourceWay",
label: "来源方式",
width: 100,
columnAlign: 'center',
},
},
{
{
prop: "remark",
label: "备注",
width: 100,
columnAlign: 'center',
},
{
prop: "status",
label: "上下架状态",
width: 100,
columnAlign: 'center',
isStatus: true
},
},
// directory 文件夹
// flag3d 是否有3d图片
......@@ -141,3 +137,45 @@ export const operations = [
]
export const importRecordsTitle = [{
prop: "createTime",
label: "导入时间",
columnAlign: "center",
},
{
prop: "batchNum",
label: "导入批次",
columnAlign: "center",
},
{
prop: "fileName",
label: "文件名称",
columnAlign: "center",
width: 220
},
{
prop: "fileSize",
label: "文件大小",
columnAlign: "center",
},
{
prop: "remark",
label: "备注",
columnAlign: "center",
},
]
export const importOperates = {
operate: true,
label: "操作",
width: "160px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
}
export const importOperations = [{
type: 'delete',
title: '删除'
},]
\ No newline at end of file
......@@ -2,7 +2,15 @@
<div class="app-container">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
</div>
<div class="tools">
<el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
>
添加</el-button
>
<el-upload
class="upload-button"
:action="importZipUrl"
......@@ -15,7 +23,7 @@
multiple
>
<el-button
type="primary"
type="success"
@click.native="handleOperation({ type: 'multiAdd' })"
icon="el-icon-upload"
>
......@@ -30,19 +38,20 @@
>
下载导入模板</el-button
>
<el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
@click.native="handleOperation({ type: 'viewImportRecord' })"
icon="el-icon-document"
>
添加</el-button
查看导入记录</el-button
>
</div>
</div>
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
:height="tableHeight"
>
<template v-slot:status="data">
<el-popconfirm
......@@ -108,6 +117,11 @@
@handleClose="handleMultiUploadClose"
@handleCancel="handleMultiUploadCancel"
/>
<ImportRecordDialog
:visible="importRecordVisible"
@handleClose="handleImportRecordClose"
/>
</div>
</template>
......@@ -124,6 +138,8 @@ import {
} from "@/api/culturalRelic";
import InfoEditDialog from "./components/InfoEditDialog";
import UploadListDialog from "./components/UploadListDialog";
import ImportRecordDialog from "./components/ImportRecordDialog";
import { importZip } from "@/utils/file";
import { getToken } from "@/utils/auth";
export default {
......@@ -132,10 +148,12 @@ export default {
TableOperation,
InfoEditDialog,
SearchBar,
UploadListDialog,
ImportRecordDialog,
UploadListDialog
},
data() {
return {
tableHeight: 400,
list: {
records: [],
size: 10,
......@@ -179,7 +197,7 @@ export default {
detailSize: "", // 具体尺寸
years: "", //年代
num: "", //数量
// deptId:'',//收藏馆id——传当前用户的deptId
deptId: "", //收藏馆id——新增传当前用户的deptId
intro: "", //馆藏介绍
literature: "", //关联文献。id1,id2,id3
// directory:'',// 文件夹(字母或者数字命名)
......@@ -203,6 +221,7 @@ export default {
authorization: getToken(),
},
multiUploadVisible: false, //控制批量上传弹窗显示
importRecordVisible: false, //上传记录
filesList: [], //上传当中的文件队列
uploadCount: 0, //处于上传中的文件数量,当等于fileList的时候就关闭弹窗,请求完毕一个就++
cancelUploadArr: [], //保存每个文件上传接口对应的取消请求的函数[fn,fn,fn...],点叉叉关闭弹窗就遍历这个全部执行一遍就取消了所以请求,(有那么点点发布订阅的思想,关闭弹窗,通知取消请求,我这里是全部取消,也可以根据需要,取消某一个请求,思想都一样的)
......@@ -249,6 +268,9 @@ export default {
async created() {
this.loadData();
},
mounted() {
// this.tableHeight = 500
},
methods: {
async search(form) {
var params = {
......@@ -315,6 +337,9 @@ export default {
case "downloadTemplate":
this.handleDownloadTemplate();
break;
case "viewImportRecord":
this.importRecordVisible = true;
break;
}
},
......@@ -480,22 +505,36 @@ export default {
status: 0,
};
},
handleImportRecordClose(){
this.importRecordVisible =false
}
},
};
</script>
<style lang="scss" scoped>
.top-bar {
.app-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.top-bar {
// display: flex;
// justify-content: space-between;
// align-items: center;
margin-bottom: 10px;
.tools {
height: 68px;
}
// .scoll-area{
// height: calc(100vh - 170px);
// overflow: auto;
// }
.tools {
display: flex;
margin-bottom: 20px;
.upload-button {
margin-right: 10px;
}
margin: 0 10px;
}
}
.pagination {
......
......@@ -200,7 +200,7 @@
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="50"
:fileSize="500"
:fileType="['mp4']"
listType="card"
ref="videos"
......@@ -686,7 +686,6 @@ export default {
switch (type) {
case "images":
unit.images = filesObj[key].join(",");
console.log("unit", unit);
break;
case "videos":
unit.videos = filesObj[key].join(",");
......
......@@ -334,7 +334,6 @@
>
<div
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
>
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
<div class="cr-name-intro" v-if="index == 0">
......@@ -540,10 +539,6 @@ export default {
}
},
reload() {
this.$emit("reload");
},
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
......@@ -557,12 +552,6 @@ export default {
this.curUnit = item;
},
handleToCr(item) {
const { crId } = item;
this.$router.push({
path: "/culturalRelic/" + crId,
});
},
},
};
</script>
......@@ -922,7 +911,7 @@ $blue: #2069c4;
}
// 关联文物
.display-detail_relateRc {
height: 560px;
min-height: 560px;
background-image: url("~@/assets/imgs/display/normal/bg.png");
background-size: 1%;
padding: 50px 0;
......@@ -1025,12 +1014,18 @@ $blue: #2069c4;
::v-deep .el-tree {
background: transparent;
.el-tree-node__content {
height: 50px;
:hover {
height: 54px;
&:hover {
background: #fff;
color: $blue;
}
}
.is-current{
.el-tree-node__content{
background-color: #fff;
color: $blue;
}
}
.el-tree-node__expand-icon{
// visibility: hidden;
......
......@@ -178,7 +178,8 @@ export default {
// background-color: #fff;
position: absolute;
top: 0;
right: 0;
// right: 0;
right: 20%;
width: 50%;
height: 100%;
background-image: linear-gradient(
......@@ -192,6 +193,9 @@ export default {
top: 100px;
left: 50%;
transform: translateX(-50%);
line-height: 1.2;
width: 100%;
}
> .unit-intro {
position: absolute;
......@@ -209,7 +213,8 @@ export default {
height: 100%;
transition: 0.6s;
> p {
color: #fff;
// color: #fff;
color: #666;
position: absolute;
left: 0;
top: 0;
......@@ -219,6 +224,10 @@ export default {
padding: 16px;
height: calc(100% - 32px);
box-shadow: 10px 0px 21px 0 #9b7e3f inset;
height: 100%;
&>span{
font-size: 26px;
}
}
}
}
......
......@@ -103,7 +103,6 @@ export default {
};
loopTree(arr);
console.log("list", list);
return list;
},
},
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论