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

src/api/system/jobinfo/index.ts

@@ -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 })
   },
 

src/utils/formatTime.ts

@@ -199,7 +199,7 @@ export function formatPast2(ms: number): string {
  * @param cellValue 字段值
  */
 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分') : ''
 }
 
 /**

src/views/system/jobinfo/JobInfoForm.vue

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

src/views/system/jobinfo/index.vue

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