Appearance
页面模版
⭐⭐⭐⭐⭐
提供了常用的三种页面的模版供一键复制
列表页
vue
<template>
<div class="main-page">
<div class="main-search">
<el-form :inline="true">
<el-form-item label="标题：">
<el-input v-model="query.title" placeholder="请输入标题" clearable></el-input>
</el-form-item>
</el-form>
</div>
<list-toolbar :queryList="queryList" :addNew="openSiteNoticeForm" :deleteList="deleteList"></list-toolbar>
<div class="main-body">
<el-table
v-loading="listLoading"
:data="list"
stripe
border
fit
highlight-current-row
header-cell-class-name="center"
cell-class-name="center"
@selection-change="selectionChange"
>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="sort" label="排序"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column prop="isStart" label="是否启用">
<template #default="scope">
<el-switch v-model="scope.row.isStart" @change="changeStart(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button type="primary" size="small" @click="openSiteNoticeForm(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-model:pageIndex="query.pageIndex" v-model:pageSize="query.pageSize" :total="total" @page-change="queryList" />
</div>
<!-- 新增修改弹窗 -->
<site-notice-dialog :row="row" v-model:visible="dialogVisible" @afterSave="queryList()"></site-notice-dialog>
</div>
</template>
<script setup>
import useList from '@/hooks/useList'
import siteNoticeDialog from './components/list_siteNoticeDialog.vue'
const opt = {
controller: 'siteNotice'
}
const { query, total, list, listLoading, queryList, deleteList, changeStart, selectionChange } = useList(opt)
const row = ref({})
const dialogVisible = ref(false)
function openSiteNoticeForm(item) {
dialogVisible.value = true
row.value = item
}
</script>
<style lang="scss" scoped>
</style>效果图：
弹窗组件
vue
<template>
<el-dialog v-model="visible" :title="dialogTitle" width="600px" @open="open" append-to-body draggable destroy-on-close>
<el-form :model="formData" :rules="dialogFormRules" label-width="110px" ref="form">
<el-form-item label="标题：" prop="title">
<el-input placeholder="请输入标题" v-model="formData.title"></el-input>
</el-form-item>
<el-form-item label="排序：" prop="sort">
<el-input-number v-model="formData.sort" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="是否启用：" prop="isStart">
<el-switch v-model="formData.isStart" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dialogSave()" :loading="saving">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import useDialog from '@/hooks/useDialog'
class FormData {
constructor() {
this.title = ''
this.sort = 1
this.content = ''
this.isStart = true
}
}
const opt = {
controller: 'siteNotice'
}
const { saving, save } = useDialog(opt)
const { proxy } = getCurrentInstance()
const props = defineProps({
row: {
type: Object
},
visible: {
type: Boolean
}
})
const visible = computed({
get: () => props.visible,
set: (value) => emit('update:visible', value)
})
const dialogTitle = ref('新增站点公告')
const formData = ref(new FormData())
const emit = defineEmits(['update:visible', 'afterSave'])
function open() {
if (props.row) {
dialogTitle.value = '修改站点公告'
formData.value = { ...props.row }
} else {
dialogTitle.value = '新增站点公告'
formData.value = new FormData()
}
}
// 保存
function dialogSave() {
const form = proxy.$refs.form
save.value(formData, form, afterSave)
}
function afterSave() {
emit('afterSave')
visible.value = false
}
const dialogFormRules = {
title: [
{ required: true, message: '标题不能为空', trigger: 'blur' }
],
content: [
{ required: true, message: '内容不能为空', trigger: 'blur' }
]
}
</script>
<style lang="scss" scoped>
</style>效果图：
详情页
vue
<template>
<div class="main-page form">
<form-toolbar :doBack="doBack" :doSave="doSave" :doDelete="doDelete"></form-toolbar>
<div class="main-body">
<el-form :model="row" :rules="rules" label-width="120px" scroll-to-error ref="form">
<el-row>
<el-col :span="18">
<el-form-item label="标题：" prop="title">
<el-input v-model="row.title" placeholder="请输入标题" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script setup>
import useForm from '@/hooks/useForm'
const opt = {
controller: 'article'
}
const { row, doDelete, doSave, doBack, isAddNew } = useForm(opt)
const { proxy } = getCurrentInstance()
const rules = {
title: [
{ required: true, message: '标题不能为空', trigger: 'blur' }
]
}
</script>
<style lang="scss" scoped>
</style>效果图：
