12 changed files with 426 additions and 268 deletions
@ -1,179 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 搜索工作栏 --> |
|
||||
<ContentWrap> |
|
||||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> |
|
||||
<el-form-item label="部门名称" prop="title"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入部门名称" clearable class="!w-240px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="info" plain @click="handleQuery"> |
|
||||
<Icon icon="ep:search" class="mr-5px" /> 搜索 |
|
||||
</el-button> |
|
||||
<el-button type="info" plain @click="resetQuery"> |
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置 |
|
||||
</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</ContentWrap> |
|
||||
<div class="flex"> |
|
||||
<!-- 详情 --> |
|
||||
<ContentWrap class="w-[73%]"> |
|
||||
<Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="ItemBasic.allSchemas.formSchema" :is-col="true"/> |
|
||||
</ContentWrap> |
|
||||
<ContentWrap class="w-[27%] ml-16px"> |
|
||||
<!-- 附件组件 --> |
|
||||
<Annex :data="annexData" @handleImport="handleImport" @deleteAnnex="deleteAnnexSuccess" /> |
|
||||
<!-- 备注组件 --> |
|
||||
<Remarks :data="remarksData" class="mt-20px" @submitSucss="remarksSubmitSucss"/> |
|
||||
<!-- 变更记录组件 --> |
|
||||
<ChangeRecord :data="changeRecordData" class="mt-20px" /> |
|
||||
</ContentWrap> |
|
||||
<!-- 用户导入对话框 --> |
|
||||
<ImportForm ref="importFormRef" :importTemplateData="importTemplateData" @success="importSuccess" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
defineOptions({ name: 'Detail' }) |
|
||||
import Annex from '@/components/Annex/src/Annex.vue' |
|
||||
import Remarks from '@/components/Remarks/src/Remarks.vue' |
|
||||
import ImportForm from '@/components/ImportForm/src/ImportForm.vue' |
|
||||
import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue' |
|
||||
import { ItemBasic } from '@/utils/disposition/tableColumns.ts' |
|
||||
|
|
||||
|
|
||||
import * as UserApi from '@/api/system/user' |
|
||||
|
|
||||
// 搜索参数 |
|
||||
const queryParams = reactive({ |
|
||||
title: '', |
|
||||
name: undefined, |
|
||||
status: undefined, |
|
||||
pageNo: 1, |
|
||||
pageSize: 100 |
|
||||
}) |
|
||||
const queryFormRef = ref() // 搜索的表单 |
|
||||
// const formLabel = ref(ItemBasic)//form表单label列表 |
|
||||
// 附件默认数据 |
|
||||
const annexData = reactive({ |
|
||||
annexList: [{ |
|
||||
title: '文件名文件名2023-12-12.docx', |
|
||||
size: '150.02KB', |
|
||||
people: '贾先生', |
|
||||
time: '2023年5月6日 17:16:00', |
|
||||
}, { |
|
||||
title: '文件名文件名2023-12-15.docx', |
|
||||
size: '242KB', |
|
||||
people: '张张', |
|
||||
time: '2022年12月12日 17:16:00', |
|
||||
}] |
|
||||
}) |
|
||||
// 备注默认数据 |
|
||||
const remarksData = reactive({ |
|
||||
remarksList: [{ |
|
||||
name: '诸葛亮', |
|
||||
text: '转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。', |
|
||||
time: '2023年5月6日 17:16:00', |
|
||||
}, { |
|
||||
name: '刘备', |
|
||||
text: '转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。', |
|
||||
time: '2022年12月12日 17:16:00', |
|
||||
}] |
|
||||
}) |
|
||||
|
|
||||
// 变更记录默认数据 |
|
||||
const changeRecordData = reactive({ |
|
||||
changeRecordList: [{ |
|
||||
name: '诸葛亮', |
|
||||
type: 1, |
|
||||
time: '2023年5月6日 17:16:00', |
|
||||
}, { |
|
||||
name: '刘备', |
|
||||
type: 2, |
|
||||
time: '2023年5月6日 17:16:00', |
|
||||
}, { |
|
||||
name: '曹操', |
|
||||
type: 3, |
|
||||
time: '2023年5月6日 17:16:00', |
|
||||
file: [{ |
|
||||
name: '这是个附件的名字.docx', |
|
||||
url: 'http://localhost:12080/admin-api/system/user/get-import-template' |
|
||||
}, { |
|
||||
name: '这是个附件的名字.docx', |
|
||||
url: 'http://localhost:12080/admin-api/system/user/get-import-template' |
|
||||
}] |
|
||||
}] |
|
||||
}) |
|
||||
// 导入附件弹窗所需的参数 |
|
||||
const importTemplateData = reactive({ |
|
||||
templateUrl: UserApi.importUserTemplate(), |
|
||||
templateTitle: '导入模版99.xls' |
|
||||
}) |
|
||||
// 导入成功之后 |
|
||||
const importSuccess = () => { |
|
||||
|
|
||||
} |
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryParams.pageNo = 1 |
|
||||
queryFormRef.value.resetFields() |
|
||||
} |
|
||||
|
|
||||
/** 用户导入 */ |
|
||||
const importFormRef = ref() |
|
||||
const handleImport = () => { |
|
||||
importFormRef.value.open() |
|
||||
} |
|
||||
// 删除附件成功之后所走的方法 |
|
||||
const deleteAnnexSuccess = async () => { |
|
||||
console.log('删除成功'); |
|
||||
} |
|
||||
// 备注提交成功之后 |
|
||||
const remarksSubmitSucss=()=>{ |
|
||||
console.log('提交陈工'); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
import * as MailAccountApi from '@/api/system/mail/account' |
|
||||
import { allSchemas, rules } from '@/views/system/mail/account/account.data' |
|
||||
|
|
||||
|
|
||||
const { t } = useI18n() // 国际化 |
|
||||
const message = useMessage() // 消息弹窗 |
|
||||
|
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
|
||||
const formRef = ref() // 表单 Ref |
|
||||
|
|
||||
|
|
||||
/** 提交表单 */ |
|
||||
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.createMailAccount(data) |
|
||||
message.success(t('common.createSuccess')) |
|
||||
} else { |
|
||||
await MailAccountApi.updateMailAccount(data) |
|
||||
message.success(t('common.updateSuccess')) |
|
||||
} |
|
||||
dialogVisible.value = false |
|
||||
// 发送操作成功的事件 |
|
||||
emit('success') |
|
||||
} finally { |
|
||||
formLoading.value = false |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
Loading…
Reference in new issue