zn-admin-vue3-wcs/src/views/system/mail/account/index.vue
YunaiV 0d6ecfb45c 1. 统一删除 dialog-footer,包括代码生成的模版
2. 查询参数列表,改下
3. 简化 formatDate
4. 看看是不是有部分新增的 plain 不对
5. modelVisible 改成 dialogVisible?modelTitle 改成 dialogTitle
2023-04-02 23:52:56 +08:00

86 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 搜索工作栏 -->
<content-wrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
<!-- 新增等操作按钮 -->
<template #actionMore>
<el-button
type="primary"
plain
@click="openModal('create')"
v-hasPermi="['system:mail-account:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</template>
</Search>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<Table
:columns="allSchemas.tableColumns"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
>
<template #action="{ row }">
<el-button
link
type="primary"
@click="openModal('update', row.id)"
v-hasPermi="['system:mail-account:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
v-hasPermi="['system:mail-account:delete']"
@click="handleDelete(row.id)"
>
删除
</el-button>
</template>
</Table>
</content-wrap>
<!-- 表单弹窗:添加/修改 -->
<mail-account-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="MailAccount">
import { allSchemas } from './account.data'
import * as MailAccountApi from '@/api/system/mail/account'
import MailAccountForm from './form.vue'
// tableObject表格的属性对象可获得分页大小条数等属性
// tableMethods表格的操作对象可进行获得分页删除记录等操作
// 详细可见https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
const { tableObject, tableMethods } = useTable({
getListApi: MailAccountApi.getMailAccountPage, // 分页接口
delListApi: MailAccountApi.deleteMailAccount // 删除接口
})
// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
/** 删除按钮操作 */
const handleDelete = (id: number) => {
tableMethods.delList(id, false)
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>