<template>
|
<basic-container>
|
<avue-crud :option="option" v-model:search="search" v-model:page="page" v-model="form" :table-loading="loading"
|
:data="data" :permission="permissionList" :before-open="beforeOpen" ref="crud" @row-update="rowUpdate"
|
@row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
|
@refresh-change="refreshChange" @on-load="onLoad">
|
<template #menu-left>
|
<el-button type="danger" icon="el-icon-delete" plain v-if="permission.leaveWords_delete" @click="handleDelete">删 除
|
</el-button>
|
<!-- <el-button type="warning" plain icon="el-icon-download" @click="handleExport">导 出
|
</el-button> -->
|
</template>
|
<template #content="{ row }">
|
<el-tooltip effect="dark" placement="top" class="content">
|
<template #content>
|
<h3 class="content-title">留言内容</h3>
|
<div class="content-box">{{ row.content }}</div>
|
</template>
|
<div class="content-abbreviate">{{ row.content }}</div>
|
</el-tooltip>
|
</template>
|
<template #imageUrls="{ row }">
|
<div v-if="!!row.imageUrls && (row.imageUrls.split(',')).length > 0" class="image-box">
|
<el-image style="width: 70px;height: 70px;" :src="(row.imageUrls.split(','))[0]" :zoom-rate="1.2" :max-scale="7"
|
:min-scale="0.2" :infinite="false" :preview-src-list="(row.imageUrls.split(','))" :initial-index="4"
|
fit="cover"></el-image>
|
<div class="image-num" v-if="!((row.imageUrls.split(',')).length <= 1)">+{{ (row.imageUrls.split(',')).length }}
|
</div>
|
</div>
|
<div v-else>暂无图片</div>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</template>
|
|
<script>
|
import { getList, getDetail, getTree, add, update, remove } from "@/api/leave/leaveWords";
|
import option from "@/option/leave/leaveWords";
|
import { mapGetters } from "vuex";
|
import { exportBlob } from "@/api/common";
|
import { getToken } from '@/utils/auth';
|
import { downloadXls } from "@/utils/util";
|
import { dateNow } from "@/utils/date";
|
import NProgress from 'nprogress';
|
import 'nprogress/nprogress.css';
|
|
export default {
|
data() {
|
return {
|
form: {},
|
query: {},
|
search: {},
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
},
|
selectionList: [],
|
option: option,
|
data: []
|
};
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.validData(this.permission.leaveWords_add, false),
|
viewBtn: this.validData(this.permission.leaveWords_view, false),
|
delBtn: this.validData(this.permission.leaveWords_delete, false),
|
editBtn: this.validData(this.permission.leaveWords_edit, false)
|
};
|
},
|
ids() {
|
let ids = [];
|
this.selectionList.forEach(ele => {
|
ids.push(ele.id);
|
});
|
return ids.join(",");
|
}
|
},
|
methods: {
|
rowSave(row, done, loading) {
|
add(row).then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
done();
|
}, error => {
|
loading();
|
window.console.log(error);
|
});
|
},
|
rowUpdate(row, index, done, loading) {
|
update(row).then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
done();
|
}, error => {
|
loading();
|
console.log(error);
|
});
|
},
|
rowDel(row) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
return remove(row.id);
|
})
|
.then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
});
|
},
|
handleDelete() {
|
if (this.selectionList.length === 0) {
|
this.$message.warning("请选择至少一条数据");
|
return;
|
}
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
return remove(this.ids);
|
})
|
.then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
this.$refs.crud.toggleSelection();
|
});
|
},
|
handleExport() {
|
let downloadUrl = `/leave/leaveWords/export-leaveWords?${this.website.tokenHeader}=${getToken()}`;
|
const {
|
} = this.query;
|
let values = {
|
};
|
this.$confirm("是否导出数据?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
NProgress.start();
|
exportBlob(downloadUrl, values).then(res => {
|
downloadXls(res.data, `留言板块${dateNow()}.xlsx`);
|
NProgress.done();
|
})
|
});
|
},
|
beforeOpen(done, type) {
|
if (["edit", "view"].includes(type)) {
|
getDetail(this.form.id).then(res => {
|
this.form = res.data.data;
|
});
|
}
|
done();
|
},
|
searchReset() {
|
this.query = {};
|
this.onLoad(this.page);
|
},
|
searchChange(params, done) {
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
done();
|
},
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
selectionClear() {
|
this.selectionList = [];
|
this.$refs.crud.toggleSelection();
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
refreshChange() {
|
this.onLoad(this.page, this.query);
|
},
|
onLoad(page, params = {}) {
|
this.loading = true;
|
|
const {
|
} = this.query;
|
|
let values = {
|
...this.query,
|
...params
|
};
|
|
getList(page.currentPage, page.pageSize, values).then(res => {
|
const data = res.data.data;
|
this.data = data.records;
|
this.page.total = data.total;
|
this.loading = false;
|
});
|
}
|
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
:deep() {
|
.el-table__cell {
|
position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
|
|
&:has(.cell >.el-table__expand-icon--expanded) {
|
padding: 0;
|
position: relative !important;
|
|
&::after {
|
content: '';
|
position: absolute;
|
left: 17px;
|
bottom: 0;
|
height: 40%;
|
border: 1px dashed #bdbebf;
|
}
|
}
|
}
|
|
.el-table__row--level-1 {
|
.el-table__cell:has(.cell > .el-table__indent) {
|
position: relative !important;
|
|
&::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 17px;
|
height: 100%;
|
border: 1px dashed #bdbebf;
|
}
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 17px;
|
width: 20px;
|
border: 1px dashed #bdbebf;
|
}
|
}
|
}
|
|
.el-table__row--level-0 {
|
& ~ .el-table__row--level-1 {
|
// .el-table__cell:has(.cell > .el-table__indent) {
|
// &::after {
|
// height: 50%;
|
// }
|
// }
|
}
|
}
|
}
|
|
.content {
|
|
&-title {
|
margin: 0;
|
margin-bottom: 10px;
|
}
|
|
&-box {
|
min-width: 150px;
|
max-width: 300px;
|
max-height: 250px;
|
overflow: auto;
|
}
|
|
&-abbreviate {
|
cursor: pointer;
|
width: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
|
.image-box {
|
width: 70px;
|
height: 70px;
|
position: relative;
|
|
.image-num {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba($color: #000000, $alpha: .4);
|
pointer-events: none;
|
color: #fff;
|
text-align: center;
|
line-height: 70px;
|
font-size: 20px;
|
}
|
}
|
</style>
|
