From 262874a117b05d0057950b493eb72b91ac12e71b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 17 Mar 2023 01:35:38 +0800
Subject: [PATCH] =?UTF-8?q?vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E9=82=AE?=
=?UTF-8?q?=E4=BB=B6=E8=B4=A6=E5=8F=B7=E7=9A=84=E6=96=B0=E5=A2=9E=20+=20?=
=?UTF-8?q?=E4=BF=AE=E6=94=B9=20+=20=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/system/mail/account/index.ts | 7 +-
src/views/system/mail/account/account.data.ts | 15 ++++
src/views/system/mail/account/form.vue | 68 +++++++++++++++++++
src/views/system/mail/account/index.vue | 44 ++++++++++--
4 files changed, 124 insertions(+), 10 deletions(-)
create mode 100644 src/views/system/mail/account/form.vue
diff --git a/src/api/system/mail/account/index.ts b/src/api/system/mail/account/index.ts
index 8b662a70..7f3b5382 100644
--- a/src/api/system/mail/account/index.ts
+++ b/src/api/system/mail/account/index.ts
@@ -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 })
}
diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index 8555a7e3..5d018cb9 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/src/views/system/mail/account/account.data.ts
@@ -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)
diff --git a/src/views/system/mail/account/form.vue b/src/views/system/mail/account/form.vue
new file mode 100644
index 00000000..ba6a31d8
--- /dev/null
+++ b/src/views/system/mail/account/form.vue
@@ -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) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+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>
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index 821c7c73..8bc29f6d 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -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>