HB
/
yudao-web
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化表单样式和逻辑，调整日期格式及删除功能

master
爱~海~爱海爱海~右 2 weeks ago
parent
c62c2103be
commit
d9adb3db1e
4 changed files with 160 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/api/system/jobinfo/index.ts
  2. 2
      src/utils/formatTime.ts
  3. 105
      src/views/system/jobinfo/JobInfoForm.vue
  4. 180
      src/views/system/jobinfo/index.vue

2
src/api/system/jobinfo/index.ts
Unescape View File

@ -37,7 +37,7 @@ export const JobInfoApi = {
}, },
// 删除工作汇报 // 删除工作汇报
deleteJobInfo: async (id: number) => { deleteJobInfo: async (id) => {
return await request.delete({ url: `/system/job-info/delete?id=` + id }) return await request.delete({ url: `/system/job-info/delete?id=` + id })
}, },

2
src/utils/formatTime.ts
Unescape View File

@ -199,7 +199,7 @@ export function formatPast2(ms: number): string {
* @param cellValue 字段值 * @param cellValue 字段值
*/ */
export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string { export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
return cellValue ? formatDate(cellValue, 'YYYY年MM月DD日 A') : '' return cellValue ? formatDate(cellValue, 'YYYY年MM月DD日 AHH时mm分') : ''
} }
/** /**

105
src/views/system/jobinfo/JobInfoForm.vue
Unescape View File

@ -1,36 +1,45 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible" :fullscreen=true> <Dialog :title="dialogTitle" v-model="dialogVisible" top="5vh">
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
label-width="100px"
v-loading="formLoading" v-loading="formLoading"
width="600px" width="600px"
class="reportForm"
> >
<el-form-item label="汇报标题" prop="title"> <section class="flex flex-wrap gap-20px">
<el-input v-model="formData.title" placeholder="请输入汇报标题" /> <el-form-item label="汇报标题" prop="title" class="!w100%">
</el-form-item> <el-input v-model="formData.title" placeholder="请输入汇报标题" />
<el-form-item label="汇报日期" prop="jobDate"> </el-form-item>
<el-date-picker <el-form-item label="汇报日期" prop="jobDate">
v-model="formData.jobDate" <el-date-picker
type="date" v-model="formData.jobDate"
placeholder="选择汇报日期" type="date"
value-format="YYYY-MM-DD" placeholder="选择汇报日期"
:dafult-time="new Date()" value-format="YYYY-MM-DD"
/> :dafult-time="new Date()"
</el-form-item> class="!w100%"
<el-form-item label="汇报人姓名" prop="jobName"> />
<el-input v-model="formData.jobName" placeholder="请输入汇报人姓名" /> </el-form-item>
</el-form-item> <el-form-item label="汇报人" prop="jobName">
<el-form-item label="汇报内容" prop="content"> <el-input v-model="formData.jobName" placeholder="请输入汇报人姓名" />
<Editor v-model="formData.content" height="450px" /> </el-form-item>
</el-form-item> <el-form-item label="汇报内容" prop="content" class="!w100%">
<Editor v-model="formData.content" height="350px" />
</el-form-item>
</section>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-popconfirm title="是否确定删除当前政策法规？" @confirm="deleteReport" width="230">
<template #reference>
<el-button type="danger" v-if="formType == 'update'" link class="underline">
我要删除
</el-button>
</template>
</el-popconfirm>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
</template> </template>
</Dialog> </Dialog>
</template> </template>
@ -45,23 +54,51 @@ const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题 const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false) // 表单加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
title: undefined, title: undefined,
content: undefined, content: undefined,
jobDate: undefined, jobDate: undefined,
jobName: undefined, jobName: undefined
}) })
const formRules = reactive({ const formRules = reactive({
title: [
{
required: true,
message: '请输入汇报标题',
trigger: 'blur'
}
],
jobDate: [
{
required: true,
message: '请选择汇报日期',
trigger: 'blur'
}
],
jobName: [
{
required: true,
message: '请输入汇报人姓名',
trigger: 'blur'
}
],
content: [
{
required: true,
message: '请输入汇报内容',
trigger: 'blur'
}
]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = type == 'create' ? '新增工作汇报' : '修改工作汇报'
formType.value = type formType.value = type
resetForm() resetForm()
// 修改时，设置数据 // 修改时，设置数据
@ -107,8 +144,24 @@ const resetForm = () => {
title: undefined, title: undefined,
content: undefined, content: undefined,
jobDate: undefined, jobDate: undefined,
jobName: undefined, jobName: undefined
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
const deleteReport = () => {
JobInfoApi.deleteJobInfo(formData.value.id).then(() => {
message.success(t('common.delSuccess'))
dialogVisible.value = false
emit('success')
})
}
</script> </script>
<style scoped lang="scss">
.reportForm {
::v-deep(.el-form-item) {
width: calc(50% - 10px);
}
}
</style>

180
src/views/system/jobinfo/index.vue
Unescape View File

@ -1,110 +1,85 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 搜索工作栏 --> <section class="flex flex-col gap-20px">
<el-form <!-- 搜索工作栏 -->
class="-mb-15px" <el-form :model="queryParams" ref="queryFormRef" :inline="true" @submit.prevent>
:model="queryParams" <el-form-item label="" prop="title">
ref="queryFormRef" <el-input
:inline="true" v-model="queryParams.title"
label-width="68px" placeholder="请输入汇报标题"
> clearable
<el-form-item label="汇报标题" prop="title"> @keyup.enter="handleQuery"
<el-input class="!w-240px"
v-model="queryParams.title" />
placeholder="请输入汇报标题" </el-form-item>
clearable
@keyup.enter="handleQuery" <el-form-item>
class="!w-240px" <el-button @click="handleQuery" type="primary" plain>
/> <Icon icon="ep:search" class="mr-5px" />
</el-form-item> 查询
<el-form-item label="汇报人姓名" prop="jobName">
<el-input
v-model="queryParams.jobName"
placeholder="请输入汇报人姓名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['system:job-info:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="汇报标题" align="center" prop="title" />
<el-table-column label="汇报日期" :formatter="dateFormatter2" align="center" prop="jobDate" />
<el-table-column label="汇报人姓名" align="center" prop="jobName" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="PDF文件" align="center" prop="pdfUrl">
<template #default="scope">
<el-button
v-if="scope.row.pdfUrl"
link
type="primary"
@click="handleOpenPdf(scope.row.pdfUrl)"
>
查看PDF
</el-button> </el-button>
<span v-else>-</span> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</template> </el-form-item>
</el-table-column> <el-form-item class="ml-auto">
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button <el-button
link
type="primary" type="primary"
@click="handleDetail(scope.row.id)" @click="openForm('create')"
v-hasPermi="['system:job-info:update']" v-hasPermi="['system:job-info:create']"
> >
生成 <Icon icon="ep:circle-plus" class="mr-5px" /> 新增
</el-button> </el-button>
<el-button </el-form-item>
link </el-form>
type="primary"
@click="openForm('update', scope.row.id)" <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
v-hasPermi="['system:job-info:update']" <el-table-column label="汇报标题" prop="title" />
> <el-table-column label="汇报日期" :formatter="dateFormatter2" prop="jobDate" />
编辑 <el-table-column label="汇报人" prop="jobName" />
</el-button> <el-table-column
<el-button label="创建时间"
link prop="createTime"
type="danger" :formatter="dateFormatter"
@click="handleDelete(scope.row.id)" />
v-hasPermi="['system:job-info:delete']" <el-table-column label="操作选项" align="center" width="120px">
> <template #default="scope">
删除 <el-button
</el-button> link
</template> type="primary"
</el-table-column> @click="openForm('update', scope.row.id)"
</el-table> v-hasPermi="['system:job-info:update']"
<!-- 分页 --> >
<Pagination 编辑
:total="total" </el-button>
v-model:page="queryParams.pageNo" <el-button
v-model:limit="queryParams.pageSize" link
@pagination="getList" type="primary"
/> v-hasPermi="['system:job-info:update']"
>
下载
</el-button>
<!-- <el-button-->
<!-- link-->
<!-- type="danger"-->
<!-- @click="handleDelete(scope.row.id)"-->
<!-- v-hasPermi="['system:job-info:delete']"-->
<!-- >-->
<!-- 删除-->
<!-- </el-button>-->
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:total="total"
:show-page-size="false"
layout="total, prev, pager, next"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getList"
class="ml-auto"
/>
</section>
</ContentWrap> </ContentWrap>
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
@ -112,7 +87,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { dateFormatter,dateFormatter2 } from '@/utils/formatTime' import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import { JobInfoApi, JobInfoVO } from '@/api/system/jobinfo' import { JobInfoApi, JobInfoVO } from '@/api/system/jobinfo'
import JobInfoForm from './JobInfoForm.vue' import JobInfoForm from './JobInfoForm.vue'
@ -131,7 +106,7 @@ const queryParams = reactive({
pageSize: 10, pageSize: 10,
title: undefined, title: undefined,
jobName: undefined, jobName: undefined,
createTime: [], createTime: []
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false) // 导出的加载中
@ -169,7 +144,6 @@ const openForm = (type: string, id?: number) => {
/** 生成按钮操作 */ /** 生成按钮操作 */
const handleDetail = async (id: number) => { const handleDetail = async (id: number) => {
try { try {
// 发起删除 // 发起删除
await JobInfoApi.jobDetail(id) await JobInfoApi.jobDetail(id)
message.success('生成成功') message.success('生成成功')

Write Preview
Loading…
Cancel
Save