vue3 重构:邮件账号的新增 + 修改 + 删除

This commit is contained in:
YunaiV 2023-03-17 01:35:38 +08:00
parent f1a80fe558
commit 262874a117
4 changed files with 124 additions and 10 deletions

View File

@ -10,13 +10,8 @@ export interface MailAccountVO {
sslEnable: boolean
}
export interface MailAccountPageReqVO extends PageParam {
mail?: string
username?: string
}
// 查询邮箱账号列表
export const getMailAccountPageApi = async (params: MailAccountPageReqVO) => {
export const getMailAccountPageApi = async (params: PageParam) => {
return await request.get({ url: '/system/mail-account/page', params })
}

View File

@ -2,6 +2,7 @@ import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { DictTag } from '@/components/DictTag'
import { TableColumn } from '@/types/table'
import { dateFormatter } from '@/utils/formatTime'
import { getBoolDictOptions } from '@/utils/dict'
const { t } = useI18n() // 国际化
@ -59,6 +60,12 @@ const crudSchemas = reactive<CrudSchema[]>([
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: cellValue
})
},
form: {
component: 'Radio',
componentProps: {
options: getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)
}
}
},
{
@ -66,6 +73,14 @@ const crudSchemas = reactive<CrudSchema[]>([
field: 'createTime',
isForm: false,
formatter: dateFormatter
},
{
label: '操作',
field: 'action',
width: '260px',
form: {
show: false
}
}
])
export const { allSchemas } = useCrudSchemas(crudSchemas)

View File

@ -0,0 +1,68 @@
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<!-- TODO 芋艿loading -->
<Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" :isCol="false" />
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="modelVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as MailAccountApi from '@/api/system/mail/account'
import { rules, allSchemas } from './account.data'
const formRef = ref() // Ref
const { t } = useI18n() //
const message = useMessage() //
const modelVisible = ref(false) //
const modelTitle = ref('') //
const formLoading = ref(false) // 12
const formType = ref('') // create - update -
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
// resetForm()
//
if (id) {
formLoading.value = true
try {
const data = await MailAccountApi.getMailAccountApi(id)
formRef.value.setValues(data)
} finally {
formLoading.value = false
}
}
}
defineExpose({ openModal }) // openModal
/** 提交表单 */
const emit = defineEmits(['success']) // success
const submitForm = async () => {
//
if (!formRef) return
const valid = await formRef.value.getElFormRef().validate()
if (!valid) return
//
formLoading.value = true
try {
const data = formRef.value.formModel as MailAccountApi.MailAccountVO
if (formType.value === 'create') {
await MailAccountApi.createMailAccountApi(data)
message.success(t('common.createSuccess'))
} else {
await MailAccountApi.updateMailAccountApi(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
//
emit('success')
} finally {
formLoading.value = false
}
}
</script>

View File

@ -1,8 +1,17 @@
<template>
<ContentWrap>
<!-- TODO @芋艿setSearchParams -->
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<el-button
type="primary"
@click="openModal('create')"
v-hasPermi="['system:mail-account:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<ContentWrap>
<Table
v-model:pageSize="tableObject.pageSize"
@ -16,18 +25,37 @@
@register="register"
>
<template #action="{ row }">
<ElButton type="danger" @click="delData(row, false)">
{{ t('exampleDemo.del') }}
</ElButton>
<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="delList(row.id, false)"
>
删除
</el-button>
</template>
</Table>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<mail-account-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="MailAccount">
import { allSchemas } from './account.data'
import { useTable } from '@/hooks/web/useTable'
import { Table } from '@/components/Table'
import * as MailAccountApi from '@/api/system/mail/account'
import MailAccountForm from './form.vue'
// const { t } = useI18n() //
// const message = useMessage() //
const { register, tableObject, methods } = useTable<MailAccountApi.MailAccountVO>({
getListApi: MailAccountApi.getMailAccountPageApi,
@ -36,5 +64,13 @@ const { register, tableObject, methods } = useTable<MailAccountApi.MailAccountVO
const { getList, setSearchParams } = methods
const { delList } = methods
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
getList()
</script>