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

业务管理模块增加loading防止用户多次提交表单,并优化表格加载体验

上级 e807e5ce
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<span> <span>
<span v-for="(op, index) in operations" :key="index"> <span v-for="(op, index) in operations" :key="index">
<span v-if="op.type == 'delete'"> <span v-if="op.type == 'delete'">
<el-popconfirm :title="deleteTitle ? deleteTitle : '确定删除吗?'" @onConfirm="clickOperation(op)"> <el-popconfirm :title="deleteTitle ? deleteTitle : '确定删除吗?'" @confirm="clickOperation(op)">
<el-button type="danger" :disabled="disabled" size="mini" slot="reference" :icon="icons[op.type]" style="margin-right: 4px"> <el-button type="danger" :disabled="disabled" size="mini" slot="reference" :icon="icons[op.type]" style="margin-right: 4px">
{{ op.title }}</el-button> {{ op.title }}</el-button>
</el-popconfirm> </el-popconfirm>
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<el-tabs v-model="activeName" type="border-card" ref="tabs"> <el-tabs v-model="activeName" type="border-card" ref="tabs">
<el-tab-pane :label="item.label" :name="item.name" v-for="(item, tabIndex) in tabs" :key="tabIndex"> <el-tab-pane :label="item.label" :name="item.name" v-for="(item, tabIndex) in tabs" :key="tabIndex">
<TablePage :data="dataList[tabIndex].records" :tableTitle="tableTitle" :operates="tableOperates"> <TablePage :data="dataList[tabIndex].records" :tableTitle="tableTitle" :operates="tableOperates" v-loading="loading">
<template v-slot:checkStatus="data"> <template v-slot:checkStatus="data">
<!-- {{ data.scope.checkStatus }} --> <!-- {{ data.scope.checkStatus }} -->
<el-tag type="primary" v-if="data.scope.checkStatus == 0"> <el-tag type="primary" v-if="data.scope.checkStatus == 0">
...@@ -180,6 +180,7 @@ export default { ...@@ -180,6 +180,7 @@ export default {
// 加载表格数据 // 加载表格数据
async loadData() { async loadData() {
this.loading = true
var params = { var params = {
page: this.dataList[this.currentTabIndex].current, page: this.dataList[this.currentTabIndex].current,
limit: this.dataList[this.currentTabIndex].size, limit: this.dataList[this.currentTabIndex].size,
...@@ -192,6 +193,7 @@ export default { ...@@ -192,6 +193,7 @@ export default {
// return item.exhibitionId; // return item.exhibitionId;
// }); // });
} }
this.loading = false
}, },
async handleOperation(value, row) { async handleOperation(value, row) {
......
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<template v-slot:status="data"> <template v-slot:status="data">
<el-popconfirm <el-popconfirm
:title="getStatusTitle(data.scope.status)" :title="getStatusTitle(data.scope.status)"
@onConfirm="handleChangeStatus(data.scope)" @confirm="handleChangeStatus(data.scope)"
> >
<el-switch <el-switch
slot="reference" slot="reference"
......
...@@ -149,7 +149,7 @@ export default { ...@@ -149,7 +149,7 @@ export default {
{ {
prop: "status", prop: "status",
type: "select", type: "select",
label: "状态", label: "上下架状态",
selectOptions: [ selectOptions: [
{ {
label: "已上线", label: "已上线",
...@@ -161,6 +161,29 @@ export default { ...@@ -161,6 +161,29 @@ export default {
}, },
], ],
}, },
{
prop: "checkStatus",
type: "select",
label: "审核状态",
selectOptions: [
{
label: "已通过",
value: "1",
},
{
label: "审核中",
value: "0",
},
{
label: "待提交",
value: "-1",
},
{
label: "已驳回",
value: "-2",
},
],
},
], ],
editDialogVisible: false, editDialogVisible: false,
isAdd: true, isAdd: true,
......
<template> <template>
<el-dialog <el-dialog :visible="dialogVisible" width="40%" :before-close="handleClose" top="5vh" lock-scroll>
:visible="dialogVisible"
width="40%"
:before-close="handleClose"
top="5vh"
lock-scroll
>
<div class="title" slot="title"> <div class="title" slot="title">
<div class="divider"></div> <div class="divider"></div>
<div class="label">{{ title }}</div> <div class="label">{{ title }}</div>
</div> </div>
<div class="el-dialog-div"> <div class="el-dialog-div">
<div class="dialog-content"> <div class="dialog-content">
<el-form <el-form :model="dialogForm" class="basic-info" ref="form" :rules="rules" v-loading="loading">
:model="dialogForm"
class="basic-info"
ref="form"
:rules="rules"
>
<el-form-item label="名称" :label-width="formLabelWidth" prop="name"> <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
<el-input <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入文献名称"></el-input>
v-model="dialogForm.name"
autocomplete="off"
placeholder="请输入文献名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="作者" :label-width="formLabelWidth"> <el-form-item label="作者" :label-width="formLabelWidth">
<el-input <el-input v-model="dialogForm.authors" autocomplete="off" placeholder="请输入作者"></el-input>
v-model="dialogForm.authors"
autocomplete="off"
placeholder="请输入作者"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="文献来源" :label-width="formLabelWidth"> <el-form-item label="文献来源" :label-width="formLabelWidth">
<el-input <el-input v-model="dialogForm.source" autocomplete="off" placeholder="请输入文献来源"></el-input>
v-model="dialogForm.source"
autocomplete="off"
placeholder="请输入文献来源"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="出版/发布日期" :label-width="formLabelWidth"> <el-form-item label="出版/发布日期" :label-width="formLabelWidth">
<el-date-picker <el-date-picker style="width: 100%" v-model="dialogForm.date" type="date" placeholder="请选择出版/发布日期"
style="width: 100%" value-format="yyyy-MM-dd">
v-model="dialogForm.date"
type="date"
placeholder="请选择出版/发布日期"
value-format="yyyy-MM-dd"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
...@@ -54,32 +26,19 @@ ...@@ -54,32 +26,19 @@
<el-switch v-model="status"> </el-switch> <el-switch v-model="status"> </el-switch>
</el-form-item> </el-form-item>
<el-form-item label="文件" :label-width="formLabelWidth"> <el-form-item label="文件" :label-width="formLabelWidth">
<ManualUploader <ManualUploader :files="files" :fileLimit="1" :fileSize="50" listType="text" :fileType="['pdf']"
:files="files" ref="pdf" />
:fileLimit="1"
:fileSize="50"
listType="text"
:fileType="['pdf']"
ref="pdf"
/>
</el-form-item> </el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth"> <el-form-item label="备注" :label-width="formLabelWidth">
<el-input <el-input type="textarea" placeholder="请输入备注" v-model="dialogForm.remark" maxlength="600" show-word-limit>
type="textarea"
placeholder="请输入备注"
v-model="dialogForm.remark"
maxlength="600"
show-word-limit
>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit">确定<i class="el-icon-circle-check"
>确定<i class="el-icon-circle-check" style="margin-left: 5px"></i style="margin-left: 5px"></i></el-button>
></el-button>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
...@@ -158,6 +117,7 @@ export default { ...@@ -158,6 +117,7 @@ export default {
}, },
], ],
}, },
loading:false
}; };
}, },
methods: { methods: {
...@@ -180,6 +140,7 @@ export default { ...@@ -180,6 +140,7 @@ export default {
}, },
handleSubmit() { handleSubmit() {
let that = this; let that = this;
this.loading = true
this.$refs.form.validate(async (valid) => { this.$refs.form.validate(async (valid) => {
if (valid) { if (valid) {
let params = JSON.parse(JSON.stringify(that.dialogForm)); let params = JSON.parse(JSON.stringify(that.dialogForm));
...@@ -211,6 +172,7 @@ export default { ...@@ -211,6 +172,7 @@ export default {
that.reloadParent(); that.reloadParent();
that.resetChildData(); that.resetChildData();
} }
this.loading = false
} else { } else {
let res = await addLiterature(params); let res = await addLiterature(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -218,6 +180,8 @@ export default { ...@@ -218,6 +180,8 @@ export default {
that.reloadParent(); that.reloadParent();
that.resetChildData(); that.resetChildData();
} }
this.loading = false
} }
} }
}); });
...@@ -230,7 +194,7 @@ export default { ...@@ -230,7 +194,7 @@ export default {
this.reloadParent(); this.reloadParent();
this.resetChildData(); this.resetChildData();
}) })
.catch((_) => {}); .catch((_) => { });
}, },
}, },
}; };
...@@ -240,35 +204,40 @@ export default { ...@@ -240,35 +204,40 @@ export default {
.title { .title {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
.divider { .divider {
width: 8px; width: 8px;
border-left: 4px solid #409eff; border-left: 4px solid #409eff;
margin-right: 8px; margin-right: 8px;
} }
.label { .label {
font-weight: bold; font-weight: bold;
} }
} }
.el-dialog-div { .el-dialog-div {
height: 70vh; // height: 50vh;
overflow-x: hidden; overflow-x: hidden;
} }
.dialog-content { .dialog-content {
padding: 0 32px; padding: 0 32px;
display: flex; display: flex;
.basic-info { .basic-info {
flex: 1; flex: 1;
margin-right: 48px; margin-right: 48px;
} }
.relate { .relate {
flex: 1; flex: 1;
} }
} }
.dialog-footer { .dialog-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin: 20px 0; padding: 20px 40px;
} }
</style> </style>
\ No newline at end of file
...@@ -14,11 +14,12 @@ ...@@ -14,11 +14,12 @@
:data="list.records" :data="list.records"
:tableTitle="tableTitle" :tableTitle="tableTitle"
:operates="tableOperates" :operates="tableOperates"
v-loading="loading"
> >
<template v-slot:status="data"> <template v-slot:status="data">
<el-popconfirm <el-popconfirm
:title="getStatusTitle(data.scope.status)" :title="getStatusTitle(data.scope.status)"
@onConfirm="handleChangeStatus(data.scope)" @confirm="handleChangeStatus(data.scope)"
> >
<el-switch <el-switch
slot="reference" slot="reference"
...@@ -120,6 +121,7 @@ export default { ...@@ -120,6 +121,7 @@ export default {
status: 1, //上下架状态 status: 1, //上下架状态
remark: "", //备注 remark: "", //备注
}, },
loading:false
}; };
}, },
...@@ -148,6 +150,7 @@ export default { ...@@ -148,6 +150,7 @@ export default {
}, },
methods: { methods: {
async search(form) { async search(form) {
this.loading = true
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
...@@ -160,6 +163,7 @@ export default { ...@@ -160,6 +163,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
} }
this.loading = false
}, },
reset() { reset() {
...@@ -168,6 +172,7 @@ export default { ...@@ -168,6 +172,7 @@ export default {
// 加载表格数据 // 加载表格数据
async loadData() { async loadData() {
this.loading = true
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
...@@ -176,6 +181,7 @@ export default { ...@@ -176,6 +181,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
} }
this.loading = false
}, },
async handleOperation(value, row) { async handleOperation(value, row) {
switch (value.type) { switch (value.type) {
......
<template> <template>
<el-dialog <el-dialog :visible.sync="dialogVisible" width="50%" style="height: 98%" :before-close="handleClose" top="5vh"
:visible.sync="dialogVisible" lock-scroll >
width="50%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
>
<div class="title" slot="title"> <div class="title" slot="title">
<div class="divider"></div> <div class="divider"></div>
<div class="label">{{ title }}</div> <div class="label">{{ title }}</div>
</div> </div>
<div class="dialog-content"> <div class="dialog-content">
<el-form :model="dialogForm" class="basic-info"> <el-form :model="dialogForm" class="basic-info" v-loading="loading">
<el-form-item label="博物馆名称" :label-width="formLabelWidth"> <el-form-item label="博物馆名称" :label-width="formLabelWidth">
<el-input <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入博物馆名称"></el-input>
v-model="dialogForm.name"
autocomplete="off"
placeholder="请输入博物馆名称"
></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="所属部门" :label-width="formLabelWidth"> <!-- <el-form-item label="所属部门" :label-width="formLabelWidth">
<el-cascader <el-cascader
...@@ -33,63 +23,38 @@ ...@@ -33,63 +23,38 @@
</el-cascader> </el-cascader>
</el-form-item> --> </el-form-item> -->
<el-form-item label="所属地" :label-width="formLabelWidth"> <el-form-item label="所属地" :label-width="formLabelWidth">
<el-cascader <el-cascader style="width: 100%" v-model="dialogForm.regionCode" :options="regionTree"
style="width: 100%" :props="regionOptionProps" placeholder="请选择所属地" :key="regionCodeModalKey">
v-model="dialogForm.regionCode"
:options="regionTree"
:props="regionOptionProps"
placeholder="请选择所属地"
:key="regionCodeModalKey"
>
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
<el-row :gutter="5"> <el-row :gutter="5">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="经度" :label-width="formLabelWidth"> <el-form-item label="经度" :label-width="formLabelWidth">
<el-input <el-input style="width: 100%" v-model="dialogForm.longitude" autocomplete="off"
style="width: 100%" placeholder="请输入经度"></el-input>
v-model="dialogForm.longitude"
autocomplete="off"
placeholder="请输入经度"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" <el-col :span="12"><el-form-item label="纬度" :label-width="formLabelWidth">
><el-form-item label="纬度" :label-width="formLabelWidth"> <el-input v-model="dialogForm.latitude" autocomplete="off" placeholder="请输入纬度"></el-input>
<el-input </el-form-item></el-col>
v-model="dialogForm.latitude"
autocomplete="off"
placeholder="请输入纬度"
></el-input> </el-form-item
></el-col>
</el-row> </el-row>
<el-form-item label="状态" :label-width="formLabelWidth"> <el-form-item label="状态" :label-width="formLabelWidth">
<el-switch v-model="status"> </el-switch> <el-switch v-model="status"> </el-switch>
</el-form-item> </el-form-item>
<el-form-item label="博物馆封面" :label-width="formLabelWidth"> <el-form-item label="博物馆封面" :label-width="formLabelWidth">
<ManualUploader <ManualUploader :files="faceImage" :fileLimit="1" :fileSize="50" listType="picture-card"
:files="faceImage" :fileType="['png', 'jpeg', 'jpg']" ref="museumFaceImage" />
:fileLimit="1"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="museumFaceImage"
/>
</el-form-item> </el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth"> <el-form-item label="简介" :label-width="formLabelWidth">
<VueQuillEditor <VueQuillEditor v-model="dialogForm.intro" :placeholder="'请输入博物馆介绍'" />
v-model="dialogForm.intro"
:placeholder="'请输入博物馆介绍'"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit">确定<i class="el-icon-circle-check"
>确定<i class="el-icon-circle-check" style="margin-left: 5px"></i style="margin-left: 5px"></i></el-button>
></el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
...@@ -128,7 +93,7 @@ export default { ...@@ -128,7 +93,7 @@ export default {
get: function () { get: function () {
return this.visible; return this.visible;
}, },
set: function () {}, set: function () { },
}, },
title() { title() {
if (this.dialogForm.id) { if (this.dialogForm.id) {
...@@ -202,7 +167,7 @@ export default { ...@@ -202,7 +167,7 @@ export default {
label: "name", label: "name",
children: "children", children: "children",
checkStrictly: true, checkStrictly: true,
}, },
regionOptionProps: { regionOptionProps: {
value: "code", value: "code",
...@@ -216,6 +181,7 @@ export default { ...@@ -216,6 +181,7 @@ export default {
regionCodeModalKey: 0, regionCodeModalKey: 0,
faceImage: [], faceImage: [],
parentPid: null, //博物馆根节点id parentPid: null, //博物馆根节点id
loading:false
}; };
}, },
methods: { methods: {
...@@ -250,6 +216,7 @@ export default { ...@@ -250,6 +216,7 @@ export default {
}); });
}, },
async handleSubmit() { async handleSubmit() {
this.loading = true
let params = { ...this.dialogForm }; let params = { ...this.dialogForm };
let deleteFileArr = []; let deleteFileArr = [];
// 回填图片 // 回填图片
...@@ -289,6 +256,7 @@ export default { ...@@ -289,6 +256,7 @@ export default {
this.$message.success("修改成功!"); this.$message.success("修改成功!");
this.reload(); this.reload();
} }
} else { } else {
let res = await addMuseum(params); let res = await addMuseum(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -296,6 +264,7 @@ export default { ...@@ -296,6 +264,7 @@ export default {
this.reload(); this.reload();
} }
} }
this.loading = false
}, },
reload() { reload() {
this.$emit("refresh", true); //需要重新获取orgTree this.$emit("refresh", true); //需要重新获取orgTree
...@@ -309,7 +278,7 @@ export default { ...@@ -309,7 +278,7 @@ export default {
this.$emit("handleClose"); this.$emit("handleClose");
this.faceImage = []; this.faceImage = [];
}) })
.catch((_) => {}); .catch((_) => { });
}, },
}, },
}; };
...@@ -319,22 +288,27 @@ export default { ...@@ -319,22 +288,27 @@ export default {
.title { .title {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
.divider { .divider {
width: 8px; width: 8px;
border-left: 4px solid #409eff; border-left: 4px solid #409eff;
margin-right: 8px; margin-right: 8px;
} }
.label { .label {
font-weight: bold; font-weight: bold;
} }
} }
.dialog-content { .dialog-content {
padding: 0 32px; padding: 0 32px;
display: flex; display: flex;
.basic-info { .basic-info {
flex: 1; flex: 1;
margin-right: 48px; margin-right: 48px;
} }
.relate { .relate {
flex: 1; flex: 1;
} }
...@@ -357,6 +331,7 @@ export default { ...@@ -357,6 +331,7 @@ export default {
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
i { i {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
......
...@@ -4,51 +4,25 @@ ...@@ -4,51 +4,25 @@
<SearchBar :config="searchConfig" @search="search" @reset="reset" /> <SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button type="primary" @click.native="handleOperation('add')"> <el-button type="primary" @click.native="handleOperation('add')">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
添加</el-button 添加</el-button>
>
</div> </div>
<el-table <el-table :tree-props="{ children: 'children' }" fit row-key="id" :data="orgTreeData" border stripe
:tree-props="{ children: 'children' }" default-expand-all v-loading="loading">
fit <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
row-key="id" <el-table-column align="center" prop="name" label="名称"></el-table-column>
:data="orgTreeData" <el-table-column align="center" prop="regionName" label="归属地"></el-table-column>
border
stripe
default-expand-all
>
<el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
<el-table-column
align="center"
prop="name"
label="名称"
></el-table-column>
<el-table-column
align="center"
prop="regionName"
label="归属地"
></el-table-column>
<el-table-column align="center" prop="status" label="状态"> <el-table-column align="center" prop="status" label="状态">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popconfirm <el-popconfirm :title="getStatusTitle(scope.row.status)" @confirm="handleChangeStatus(scope.row)">
:title="getStatusTitle(scope.row.status)" <el-switch slot="reference" :value="Boolean(Number(scope.row.status))"></el-switch>
@onConfirm="handleChangeStatus(scope.row)"
>
<el-switch
slot="reference"
:value="Boolean(Number(scope.row.status))"
></el-switch>
</el-popconfirm> </el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="封面"> <el-table-column align="center" label="封面">
<template slot-scope="scope"> <template slot-scope="scope">
<img <img :src="scope.row.faceImageUrl" style="cursor: pointer" width="100px"
:src="scope.row.faceImageUrl" @click="handelPreviewImages(scope.row.faceImageUrl)" />
style="cursor: pointer"
width="100px"
@click="handelPreviewImages(scope.row.faceImageUrl)"
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="longitude" label="经度"> <el-table-column align="center" prop="longitude" label="经度">
...@@ -67,41 +41,17 @@ ...@@ -67,41 +41,17 @@
</el-table-column> --> </el-table-column> -->
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="handleOperation('edit', scope.row)"
type="primary" style="margin-right: 4px">编辑</el-button>
size="mini" <el-popconfirm title="确定删除吗?" @confirm="handleOperation('delete', scope.row)">
icon="el-icon-edit" <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference">删除</el-button>
@click.native="handleOperation('edit', scope.row)"
style="margin-right: 4px"
>编辑</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> </el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<InfoEditDialog <InfoEditDialog :visible="drawerVisible" :form="form" :orgTreeData="orgTreeData" @handleClose="handleClose"
:visible="drawerVisible" @refresh="loadData" />
:form="form" <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
:orgTreeData="orgTreeData"
@handleClose="handleClose"
@refresh="loadData"
/>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
...@@ -185,8 +135,8 @@ export default { ...@@ -185,8 +135,8 @@ export default {
created() { created() {
this.loadData(true); this.loadData(true);
}, },
watch:{ watch: {
'searchForm.name':function(value){ 'searchForm.name': function (value) {
console.log(value); console.log(value);
} }
}, },
...@@ -250,9 +200,13 @@ export default { ...@@ -250,9 +200,13 @@ export default {
* @param isReload {Boolean} 是否需要重新调用接口加载,默认不传则从vuex中获取 * @param isReload {Boolean} 是否需要重新调用接口加载,默认不传则从vuex中获取
*/ */
loadData(isReload) { loadData(isReload) {
this.loading = true
this.$store.dispatch("org/getMuseumTreeData", isReload).then((res) => { this.$store.dispatch("org/getMuseumTreeData", isReload).then((res) => {
this.orgTreeData = res[0].children this.orgTreeData = res[0].children
this.tableData = res[0].children this.tableData = res[0].children
this.loading = false
}).catch(err => {
this.loading = false
}); });
}, },
...@@ -278,7 +232,7 @@ export default { ...@@ -278,7 +232,7 @@ export default {
}, },
async handleChangeStatus(row) { async handleChangeStatus(row) {
// debugger // debugger
const { status } = row; const { status } = row;
let newStatus = status ? "0" : "1"; let newStatus = status ? "0" : "1";
const params = { const params = {
...@@ -358,6 +312,7 @@ export default { ...@@ -358,6 +312,7 @@ export default {
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.pagination { .pagination {
margin: 16px; margin: 16px;
} }
......
...@@ -2,79 +2,38 @@ ...@@ -2,79 +2,38 @@
<div class="app-container"> <div class="app-container">
<div class="top-bar"> <div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" /> <SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button <el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-plus">
type="primary" 添加</el-button>
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
>
添加</el-button
>
</div> </div>
<TablePage <TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates" v-loading="loading">
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<template v-slot:images="data"> <template v-slot:images="data">
<img <img :src="$getFullUrl(data.scope.imagesVo[0].pressUrl)" alt="暂无图片" v-if="data.scope.imagesVo.length > 0" style="
:src="$getFullUrl(data.scope.imagesVo[0].pressUrl)"
alt="暂无图片"
v-if="data.scope.imagesVo.length > 0"
style="
cursor: pointer; cursor: pointer;
height: 100px; height: 100px;
width: 100px; width: 100px;
object-fit: contain; object-fit: contain;
" " width="100px" @click="
width="100px"
@click="
handelPreviewImages($getFullUrl(data.scope.imagesVo[0].pressUrl)) handelPreviewImages($getFullUrl(data.scope.imagesVo[0].pressUrl))
" " />
/>
</template> </template>
<template v-slot:status="data"> <template v-slot:status="data">
<el-popconfirm <el-popconfirm :title="getStatusTitle(data.scope.status)" @onConfirm="handleChangeStatus(data.scope)">
:title="getStatusTitle(data.scope.status)" <el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
@onConfirm="handleChangeStatus(data.scope)"
>
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
</el-popconfirm> </el-popconfirm>
</template> </template>
<template v-slot:operates="scope"> <template v-slot:operates="scope">
<TableOperation <TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
:operations="tableOperations" </TableOperation>
:rawData="scope.scope.row"
@handleOperation="handleOperation"
></TableOperation>
</template> </template>
</TablePage> </TablePage>
<el-pagination <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
@size-change="handleSizeChange" :current-page="Number(list.current)" :page-sizes="[10, 20, 40, 50]" :page-size="Number(list.size)"
@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
: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> </el-pagination>
<InfoEditDialog <InfoEditDialog :visible="drawerVisible" :form="form" :orgTreeData="orgTreeData" @handleClose="handleClose"
:visible="drawerVisible" @refresh="loadData" />
:form="form" <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
:orgTreeData="orgTreeData"
@handleClose="handleClose"
@refresh="loadData"
/>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
...@@ -190,6 +149,7 @@ export default { ...@@ -190,6 +149,7 @@ export default {
// 加载表格数据 // 加载表格数据
async loadData() { async loadData() {
this.loading = true
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
...@@ -198,6 +158,7 @@ export default { ...@@ -198,6 +158,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
} }
this.loading = false
}, },
loadOrgTree() { loadOrgTree() {
this.$store.dispatch("org/getMuseumTreeData", true).then((res) => { this.$store.dispatch("org/getMuseumTreeData", true).then((res) => {
...@@ -303,43 +264,54 @@ export default { ...@@ -303,43 +264,54 @@ export default {
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.pagination { .pagination {
margin: 16px; margin: 16px;
} }
::v-deep .el-card__header { ::v-deep .el-card__header {
padding: 10px 20px; padding: 10px 20px;
font-weight: bold; font-weight: bold;
} }
.deptName { .deptName {
padding: 12px 16px; padding: 12px 16px;
font-size: 13px; font-size: 13px;
} }
.theme { .theme {
padding: 4px 16px; padding: 4px 16px;
font-size: 13px; font-size: 13px;
} }
.faceImage { .faceImage {
padding: 16px; padding: 16px;
.img { .img {
position: relative; position: relative;
// width: 100%; // width: 100%;
width: 100%; width: 100%;
height: 160px; height: 160px;
&:hover { &:hover {
.modal { .modal {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
i { i {
display: inline; display: inline;
} }
.view-text { .view-text {
display: block; display: block;
} }
} }
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.modal { .modal {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -351,28 +323,33 @@ export default { ...@@ -351,28 +323,33 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
i { i {
font-size: 28px; font-size: 28px;
color: #fff; color: #fff;
display: none; display: none;
transition: all ease 0.3s; transition: all ease 0.3s;
} }
.view-text { .view-text {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
display: none; display: none;
transition: all ease 0.3s; transition: all ease 0.3s;
} }
// display: none; // display: none;
} }
} }
} }
::v-deep .el-image { ::v-deep .el-image {
.image-slot { .image-slot {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.buttons { .buttons {
.el-button { .el-button {
border-radius: 0; border-radius: 0;
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<template v-slot:status="data"> <template v-slot:status="data">
<el-popconfirm <el-popconfirm
:title="getStatusTitle(data.scope.status)" :title="getStatusTitle(data.scope.status)"
@onConfirm="handleChangeStatus(data.scope)" @confirm="handleChangeStatus(data.scope)"
> >
<el-switch <el-switch
slot="reference" slot="reference"
......
<template> <template>
<el-dialog <el-dialog :visible.sync="dialogVisible" width="40%" style="height: 98%" :before-close="handleClose" top="5vh"
:visible.sync="dialogVisible" lock-scroll>
width="40%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
>
<div class="title" slot="title"> <div class="title" slot="title">
<div class="divider"></div> <div class="divider"></div>
<div class="label">{{ title }}</div> <div class="label">{{ title }}</div>
</div> </div>
<div class="dialog-content"> <div class="dialog-content">
<el-form :model="dialogForm" class="basic-info" ref="form" :rules="rules"> <el-form :model="dialogForm" class="basic-info" ref="form" :rules="rules" v-loading="loading">
<el-form-item label="名称" :label-width="formLabelWidth" prop="name"> <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
<el-input <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入名称"></el-input>
v-model="dialogForm.name"
autocomplete="off"
placeholder="请输入名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="所属博物馆" :label-width="formLabelWidth"> <el-form-item label="所属博物馆" :label-width="formLabelWidth">
<el-cascader <el-cascader style="width: 100%" v-model="dialogForm.deptId" :options="orgTreeData" :props="optionProps"
style="width: 100%" placeholder="请选择所属博物馆" :key="pidModalKey" filterable>
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择所属博物馆"
:key="pidModalKey"
filterable
>
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="所属地" :label-width="formLabelWidth"> <el-form-item label="所属地" :label-width="formLabelWidth">
<el-cascader <el-cascader style="width: 100%" v-model="dialogForm.regionCode" :options="regionTree"
style="width: 100%" :props="regionOptionProps" placeholder="请选择所属地" :key="regionCodeModalKey" filterable>
v-model="dialogForm.regionCode"
:options="regionTree"
:props="regionOptionProps"
placeholder="请选择所属地"
:key="regionCodeModalKey"
filterable
>
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth"> <el-form-item label="简介" :label-width="formLabelWidth">
<el-input <el-input type="textarea" placeholder="请输入展厅简介" v-model="dialogForm.intro" maxlength="600" show-word-limit>
type="textarea"
placeholder="请输入展厅简介"
v-model="dialogForm.intro"
maxlength="600"
show-word-limit
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth"> <el-form-item label="状态" :label-width="formLabelWidth">
...@@ -60,30 +30,19 @@ ...@@ -60,30 +30,19 @@
<el-form-item label="链接" :label-width="formLabelWidth" prop="url"> <el-form-item label="链接" :label-width="formLabelWidth" prop="url">
<!-- <el-switch v-model="dialogForm.url"> </el-switch> --> <!-- <el-switch v-model="dialogForm.url"> </el-switch> -->
<el-input <el-input v-model="dialogForm.url" autocomplete="off" placeholder="请输入链接"></el-input>
v-model="dialogForm.url"
autocomplete="off"
placeholder="请输入链接"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="展览封面" :label-width="formLabelWidth"> <el-form-item label="展览封面" :label-width="formLabelWidth">
<ManualUploader <ManualUploader :files="faceImage" :fileLimit="1" :fileSize="50" listType="picture-card"
:files="faceImage" :fileType="['png', 'jpeg', 'jpg']" ref="faceImage" />
:fileLimit="1"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="faceImage"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit">确定<i class="el-icon-circle-check"
>确定<i class="el-icon-circle-check" style="margin-left: 5px"></i style="margin-left: 5px"></i></el-button>
></el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
...@@ -118,7 +77,7 @@ export default { ...@@ -118,7 +77,7 @@ export default {
get: function () { get: function () {
return this.visible; return this.visible;
}, },
set: function () {}, set: function () { },
}, },
title() { title() {
if (this.dialogForm.bvId) { if (this.dialogForm.bvId) {
...@@ -211,6 +170,7 @@ export default { ...@@ -211,6 +170,7 @@ export default {
name: [{ required: true, message: "请输入名称", trigger: "blur" }], name: [{ required: true, message: "请输入名称", trigger: "blur" }],
url: [{ required: true, message: "请输入链接", trigger: "blur" }], url: [{ required: true, message: "请输入链接", trigger: "blur" }],
}, },
loading: false
}; };
}, },
methods: { methods: {
...@@ -246,7 +206,9 @@ export default { ...@@ -246,7 +206,9 @@ export default {
}, },
handleSubmit() { handleSubmit() {
this.$refs.form.validate(async (valid) => { this.$refs.form.validate(async (valid) => {
this.loading = true
if (valid) { if (valid) {
let params = { ...this.dialogForm }; let params = { ...this.dialogForm };
// // 回填图片 // // 回填图片
// if (this.faceImage.length > 0) { // if (this.faceImage.length > 0) {
...@@ -294,6 +256,7 @@ export default { ...@@ -294,6 +256,7 @@ export default {
this.$message.success("修改成功!"); this.$message.success("修改成功!");
this.reload(); this.reload();
} }
this.loading = false
} else { } else {
// let params = { ...this.dialogForm }; // let params = { ...this.dialogForm };
// // // 回填图片 // // // 回填图片
...@@ -312,6 +275,7 @@ export default { ...@@ -312,6 +275,7 @@ export default {
this.$message.success("添加成功!"); this.$message.success("添加成功!");
this.reload(); this.reload();
} }
this.loading = false
} }
} }
}); });
...@@ -328,7 +292,7 @@ export default { ...@@ -328,7 +292,7 @@ export default {
this.$emit("handleClose"); this.$emit("handleClose");
this.faceImage = []; this.faceImage = [];
}) })
.catch((_) => {}); .catch((_) => { });
}, },
}, },
}; };
...@@ -338,22 +302,27 @@ export default { ...@@ -338,22 +302,27 @@ export default {
.title { .title {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
.divider { .divider {
width: 8px; width: 8px;
border-left: 4px solid #409eff; border-left: 4px solid #409eff;
margin-right: 8px; margin-right: 8px;
} }
.label { .label {
font-weight: bold; font-weight: bold;
} }
} }
.dialog-content { .dialog-content {
padding: 0 32px; padding: 0 32px;
display: flex; display: flex;
.basic-info { .basic-info {
flex: 1; flex: 1;
margin-right: 48px; margin-right: 48px;
} }
.relate { .relate {
flex: 1; flex: 1;
} }
...@@ -376,6 +345,7 @@ export default { ...@@ -376,6 +345,7 @@ export default {
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
i { i {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
......
...@@ -2,72 +2,32 @@ ...@@ -2,72 +2,32 @@
<div class="app-container"> <div class="app-container">
<div class="top-bar"> <div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" /> <SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button <el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-plus">
type="primary" 添加</el-button>
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
>
添加</el-button
>
</div> </div>
<TablePage <TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates" v-loading="loading">
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<template v-slot:faceImageUrl="data"> <template v-slot:faceImageUrl="data">
<img <img :src="data.scope.faceImageUrl" alt="暂无图片" v-if="data.scope.faceImageUrl" style="cursor: pointer"
:src="data.scope.faceImageUrl" width="100px" @click="handelPreviewImages(data.scope.faceImageUrl)" />
alt="暂无图片"
v-if="data.scope.faceImageUrl"
style="cursor: pointer"
width="100px"
@click="handelPreviewImages(data.scope.faceImageUrl)"
/>
</template> </template>
<template v-slot:status="data"> <template v-slot:status="data">
<el-popconfirm <el-popconfirm :title="getStatusTitle(data.scope.status)" @confirm="handleChangeStatus(data.scope)">
:title="getStatusTitle(data.scope.status)" <el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
@onConfirm="handleChangeStatus(data.scope)"
>
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
</el-popconfirm> </el-popconfirm>
</template> </template>
<template v-slot:operates="scope"> <template v-slot:operates="scope">
<TableOperation <TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
:operations="tableOperations" </TableOperation>
:rawData="scope.scope.row"
@handleOperation="handleOperation"
></TableOperation>
</template> </template>
</TablePage> </TablePage>
<el-pagination <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
@size-change="handleSizeChange" :current-page="Number(list.current)" :page-sizes="[10, 20, 40, 50]" :page-size="Number(list.size)"
@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
: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> </el-pagination>
<InfoEditDialog <InfoEditDialog :visible="drawerVisible" :form="form" :orgTreeData="orgTreeData" @handleClose="handleClose"
:visible="drawerVisible" @refresh="loadData" />
:form="form" <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
:orgTreeData="orgTreeData"
@handleClose="handleClose"
@refresh="loadData"
/>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
...@@ -164,6 +124,7 @@ export default { ...@@ -164,6 +124,7 @@ export default {
}, },
methods: { methods: {
async search(form) { async search(form) {
this.loading = true
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
...@@ -176,6 +137,7 @@ export default { ...@@ -176,6 +137,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
} }
this.loading = false
}, },
reset() { reset() {
...@@ -184,6 +146,7 @@ export default { ...@@ -184,6 +146,7 @@ export default {
// 加载表格数据 // 加载表格数据
async loadData() { async loadData() {
this.loading = true
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
...@@ -192,6 +155,7 @@ export default { ...@@ -192,6 +155,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
} }
this.loading = false
}, },
loadOrgTree() { loadOrgTree() {
this.$store.dispatch("org/getMuseumTreeData", true).then((res) => { this.$store.dispatch("org/getMuseumTreeData", true).then((res) => {
...@@ -297,43 +261,54 @@ export default { ...@@ -297,43 +261,54 @@ export default {
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.pagination { .pagination {
margin: 16px; margin: 16px;
} }
::v-deep .el-card__header { ::v-deep .el-card__header {
padding: 10px 20px; padding: 10px 20px;
font-weight: bold; font-weight: bold;
} }
.deptName { .deptName {
padding: 12px 16px; padding: 12px 16px;
font-size: 13px; font-size: 13px;
} }
.theme { .theme {
padding: 4px 16px; padding: 4px 16px;
font-size: 13px; font-size: 13px;
} }
.faceImage { .faceImage {
padding: 16px; padding: 16px;
.img { .img {
position: relative; position: relative;
// width: 100%; // width: 100%;
width: 100%; width: 100%;
height: 160px; height: 160px;
&:hover { &:hover {
.modal { .modal {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
i { i {
display: inline; display: inline;
} }
.view-text { .view-text {
display: block; display: block;
} }
} }
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.modal { .modal {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -345,28 +320,33 @@ export default { ...@@ -345,28 +320,33 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
i { i {
font-size: 28px; font-size: 28px;
color: #fff; color: #fff;
display: none; display: none;
transition: all ease 0.3s; transition: all ease 0.3s;
} }
.view-text { .view-text {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
display: none; display: none;
transition: all ease 0.3s; transition: all ease 0.3s;
} }
// display: none; // display: none;
} }
} }
} }
::v-deep .el-image { ::v-deep .el-image {
.image-slot { .image-slot {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.buttons { .buttons {
.el-button { .el-button {
border-radius: 0; border-radius: 0;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论