285 lines
8.7 KiB
Vue
285 lines
8.7 KiB
Vue
|
<template>
|
||
|
|
<div class="default-main">
|
||
|
|
<TableHeader>
|
||
|
|
<template v-slot:select>
|
||
|
|
<el-form-item label="页面名称">
|
||
|
|
<el-input
|
||
|
|
maxlength="32"
|
||
|
|
show-word-limit
|
||
|
|
v-model.trim="tableStore.table.params.searchValue"
|
||
|
|
placeholder="请输入页面名称"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-slot:operation>
|
||
|
|
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
|
||
|
|
</template>
|
||
|
|
</TableHeader>
|
||
|
|
<!-- <Table ref="tableRef" /> -->
|
||
|
|
<div
|
||
|
|
style="overflow-x: hidden; overflow-y: scroll; padding: 0 10px"
|
||
|
|
v-loading="tableStore.table.loading"
|
||
|
|
:style="{ height: tableStore.table.height }"
|
||
|
|
>
|
||
|
|
<el-row :gutter="12">
|
||
|
|
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
|
||
|
|
<el-card class="box-card" shadow="hover">
|
||
|
|
<div slot="header" class="clearfix">
|
||
|
|
<span
|
||
|
|
style="display: flex; align-items: center; font-weight: 550"
|
||
|
|
:style="{ color: item.state == 1 ? `var(--el-color-primary)` : '' }"
|
||
|
|
>
|
||
|
|
{{ item.pageName }}
|
||
|
|
</span>
|
||
|
|
<div style="display: flex; justify-content: end">
|
||
|
|
<el-button
|
||
|
|
class="color"
|
||
|
|
icon="el-icon-Position"
|
||
|
|
style="padding: 3px 0"
|
||
|
|
type="text"
|
||
|
|
v-if="item.state == 0"
|
||
|
|
@click="activation(item)"
|
||
|
|
>
|
||
|
|
激活
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
class="color"
|
||
|
|
icon="el-icon-View"
|
||
|
|
style="padding: 3px 0"
|
||
|
|
type="text"
|
||
|
|
@click="preview(item)"
|
||
|
|
>
|
||
|
|
预览
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
class="color"
|
||
|
|
icon="el-icon-Edit"
|
||
|
|
style="padding: 3px 0"
|
||
|
|
type="text"
|
||
|
|
@click="editd(item)"
|
||
|
|
>
|
||
|
|
修改
|
||
|
|
</el-button>
|
||
|
|
|
||
|
|
<el-button
|
||
|
|
icon="el-icon-Delete"
|
||
|
|
style="padding: 3px 0; color: red"
|
||
|
|
type="text"
|
||
|
|
@click="deleted(item)"
|
||
|
|
>
|
||
|
|
删除
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img v-if="item.thumbnail" :src="item.thumbnail" class="image" />
|
||
|
|
<el-empty style="height: 220px" v-else description="暂无设计" />
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
<div class="table-pagination">
|
||
|
|
<el-pagination
|
||
|
|
:currentPage="tableStore.table.params!.pageNum"
|
||
|
|
:page-size="tableStore.table.params!.pageSize"
|
||
|
|
:page-sizes="[10, 20, 50, 100]"
|
||
|
|
background
|
||
|
|
:layout="'sizes,total, ->, prev, pager, next, jumper'"
|
||
|
|
:total="tableStore.table.total"
|
||
|
|
@size-change="onTableSizeChange"
|
||
|
|
@current-change="onTableCurrentChange"
|
||
|
|
></el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { Plus } from '@element-plus/icons-vue'
|
||
|
|
import { ref, onMounted, provide } from 'vue'
|
||
|
|
import TableStore from '@/utils/tableStore'
|
||
|
|
import TableHeader from '@/components/table/header/index.vue'
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
import { Edit } from '@element-plus/icons-vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
const { push } = useRouter()
|
||
|
|
import { deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
|
||
|
|
defineOptions({
|
||
|
|
// name: 'cockpit/setUp'
|
||
|
|
})
|
||
|
|
const tableRef = ref()
|
||
|
|
|
||
|
|
const tableStore = new TableStore({
|
||
|
|
showPage: false,
|
||
|
|
url: '/system-boot/dashboard/queryPage',
|
||
|
|
method: 'POST',
|
||
|
|
publicHeight: 60,
|
||
|
|
column: [],
|
||
|
|
loadCallback: () => {}
|
||
|
|
})
|
||
|
|
provide('tableStore', tableStore)
|
||
|
|
tableStore.table.params.searchValue = ''
|
||
|
|
onMounted(() => {
|
||
|
|
tableStore.table.ref = tableRef.value
|
||
|
|
tableStore.index()
|
||
|
|
tableStore.table.loading = false
|
||
|
|
})
|
||
|
|
// 查询
|
||
|
|
const onSubmitadd = () => {
|
||
|
|
push(`/admin/cockpit/popup`)
|
||
|
|
}
|
||
|
|
// 预览
|
||
|
|
const preview = (e: any) => {
|
||
|
|
push(`/admin/cockpit/view?id=${e.id}`)
|
||
|
|
}
|
||
|
|
// 修改
|
||
|
|
const editd = (e: any) => {
|
||
|
|
push(`/admin/cockpit/popup?id=${e.id}`)
|
||
|
|
}
|
||
|
|
// 删除
|
||
|
|
const deleted = (e: any) => {
|
||
|
|
ElMessageBox.confirm('此操作将永久删除该页面, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
deleteDashboard({ id: e.id }).then((res: any) => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
ElMessage({
|
||
|
|
type: 'success',
|
||
|
|
message: '删除页面成功!'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
tableStore.index()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage({
|
||
|
|
type: 'info',
|
||
|
|
message: '已取消删除'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 激活
|
||
|
|
const activation = (e: any) => {
|
||
|
|
ElMessageBox.confirm('此操作将激活该页面, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
activatePage({ id: e.id }).then((res: any) => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
ElMessage({
|
||
|
|
type: 'success',
|
||
|
|
message: '激活成功!'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
tableStore.index()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage({
|
||
|
|
type: 'info',
|
||
|
|
message: '已取消删除'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const onTableSizeChange = (val: number) => {
|
||
|
|
tableStore.onTableAction('page-size-change', { size: val })
|
||
|
|
}
|
||
|
|
|
||
|
|
const onTableCurrentChange = (val: number) => {
|
||
|
|
tableStore.onTableAction('current-page-change', { page: val })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.text {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 220px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clearfix::before,
|
||
|
|
.clearfix::after {
|
||
|
|
display: table;
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
|
||
|
|
.clearfix::after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-card {
|
||
|
|
width: 100%;
|
||
|
|
// border: 1px solid #000;
|
||
|
|
box-shadow: var(--el-box-shadow-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.setstyle {
|
||
|
|
min-height: 200px;
|
||
|
|
padding: 0 !important;
|
||
|
|
margin: 0;
|
||
|
|
overflow: auto;
|
||
|
|
cursor: default !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color {
|
||
|
|
color: var(--el-color-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-select-dropdown__wrap) {
|
||
|
|
max-height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-tree) {
|
||
|
|
padding-top: 15px;
|
||
|
|
padding-left: 10px;
|
||
|
|
|
||
|
|
// 不可全选样式
|
||
|
|
.el-tree-node {
|
||
|
|
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-checkbox .el-checkbox__inner {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-card__header) {
|
||
|
|
padding: 13px 20px;
|
||
|
|
height: 44px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-pagination {
|
||
|
|
height: 58px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
background-color: var(--ba-bg-color-overlay);
|
||
|
|
padding: 13px 15px;
|
||
|
|
border-left: 1px solid #e4e7e9;
|
||
|
|
border-right: 1px solid #e4e7e9;
|
||
|
|
border-bottom: 1px solid #e4e7e9;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-pagination__sizes) {
|
||
|
|
.el-select {
|
||
|
|
min-width: 128px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|