优化 post 岗位的逻辑实现代码

Author: YunaiV

src/components/Form/src/helper.ts

@@ -16,7 +16,7 @@ export const setTextPlaceholder = (schema: FormSchema): PlaceholderMoel => {
   const selectMap = ['Select', 'SelectV2', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
   if (textMap.includes(schema?.component as string)) {
     return {
-      placeholder: t('common.inputText')
+      placeholder: t('common.inputText') + schema.label
     }
   }
   if (selectMap.includes(schema?.component as string)) {
@@ -34,7 +34,7 @@ export const setTextPlaceholder = (schema: FormSchema): PlaceholderMoel => {
       }
     } else {
       return {
-        placeholder: t('common.selectText')
+        placeholder: t('common.selectText') + schema.label
       }
     }
   }

src/locales/en.ts

@@ -281,6 +281,7 @@ export default {
     create: 'Create',
     add: 'Add',
     del: 'Delete',
+    delete: 'Delete',
     edit: 'Edit',
     update: 'Update',
     preview: 'Preview',

src/locales/zh-CN.ts

@@ -281,6 +281,7 @@ export default {
     create: '新增',
     add: '新增',
     del: '删除',
+    delete: '删除',
     edit: '编辑',
     update: '编辑',
     preview: '预览',

src/views/system/post/PostForm.vue src/views/system/post/form.vuesrc/views/system/post/PostForm.vue renamed to src/views/system/post/form.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 弹窗 -->
-  <XModal id="PostForm" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
+  <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible" height="270px">
     <!-- 表单：添加/修改 -->
     <Form
       ref="formRef"
@@ -35,22 +35,21 @@ import { rules, allSchemas } from './post.data'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const emit = defineEmits(['success'])
-
 // 弹窗相关的变量
 const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('update') // 弹出层标题
+const modelTitle = ref('') // 弹出层标题
 const modelLoading = ref(false) // 弹出层loading
 const actionType = ref('') // 操作按钮的类型
 const actionLoading = ref(false) // 按钮 Loading
 const formRef = ref<FormExpose>() // 表单 Ref
 const detailData = ref() // 详情 Ref
 
+// 打开弹窗
 const openModal = async (type: string, rowId?: number) => {
+  modelVisible.value = true
   modelLoading.value = true
   modelTitle.value = t('action.' + type)
   actionType.value = type
-  modelVisible.value = true
   // 设置数据
   if (rowId) {
     const res = await PostApi.getPostApi(rowId)
@@ -62,31 +61,33 @@ const openModal = async (type: string, rowId?: number) => {
   }
   modelLoading.value = false
 }
+defineExpose({ openModal: openModal }) // 提供 openModal 方法，用于打开弹窗
 
 // 提交新增/修改的表单
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
+  // 校验表单
   const elForm = unref(formRef)?.getElFormRef()
   if (!elForm) return
   const valid = await elForm.validate()
-  if (valid) {
-    actionLoading.value = true
-    // 提交请求
-    try {
-      const data = unref(formRef)?.formModel as PostApi.PostVO
-      if (actionType.value === 'create') {
-        await PostApi.createPostApi(data)
-        message.success(t('common.createSuccess'))
-      } else {
-        await PostApi.updatePostApi(data)
-        message.success(t('common.updateSuccess'))
-      }
-      modelVisible.value = false
-      emit('success')
-    } finally {
-      actionLoading.value = false
+  if (!valid) {
+    return
+  }
+  // 提交请求
+  actionLoading.value = true
+  try {
+    const data = unref(formRef)?.formModel as PostApi.PostVO
+    if (actionType.value === 'create') {
+      await PostApi.createPostApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PostApi.updatePostApi(data)
+      message.success(t('common.updateSuccess'))
     }
+    modelVisible.value = false
+    emit('success')
+  } finally {
+    actionLoading.value = false
   }
 }
-
-defineExpose({ openModal: openModal })
 </script>

src/views/system/post/index.vue

@@ -13,7 +13,8 @@
         />
         <!-- 操作：导出 -->
         <XButton
-          type="warning"
+          type="primary"
+          plain
           preIcon="ep:download"
           :title="t('action.export')"
           v-hasPermi="['system:post:export']"
@@ -24,44 +25,48 @@
         <!-- 操作：修改 -->
         <XTextButton
           preIcon="ep:edit"
+          :title="t('action.edit')"
           v-hasPermi="['system:post:update']"
-          @click="openModal('update', row.id)"
+          @click="openModal('update', row?.id)"
         />
         <!-- 操作：详情 -->
         <XTextButton
           preIcon="ep:view"
+          :title="t('action.detail')"
           v-hasPermi="['system:post:query']"
-          @click="openModal('detail', row.id)"
+          @click="openModal('detail', row?.id)"
         />
         <!-- 操作：删除 -->
         <XTextButton
           preIcon="ep:delete"
+          :title="t('action.delete')"
           v-hasPermi="['system:post:delete']"
-          @click="deleteData(row.id)"
+          @click="deleteData(row?.id)"
         />
       </template>
     </XTable>
   </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改/详情 -->
   <PostForm ref="modalRef" @success="reload()" />
 </template>
 <script setup lang="ts" name="Post">
-// 业务相关的 import
 import * as PostApi from '@/api/system/post'
 import { allSchemas } from './post.data'
-import PostForm from './PostForm.vue'
-
+import PostForm from './form.vue'
 const { t } = useI18n() // 国际化
 
 // 列表相关的变量
 const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: PostApi.getPostPageApi,
-  deleteApi: PostApi.deletePostApi,
-  exportListApi: PostApi.exportPostApi
+  allSchemas: allSchemas, // 列表配置
+  getListApi: PostApi.getPostPageApi, // 加载列表的 API
+  deleteApi: PostApi.deletePostApi, // 删除数据的 API
+  exportListApi: PostApi.exportPostApi // 导出数据的 API
 })
+
 // 表单相关的变量
 const modalRef = ref()
-const openModal = (type: string, rowId?: number) => {
-  modalRef.value.openModal(type, rowId)
+const openModal = (actionType: string, id?: number) => {
+  modalRef.value.openModal(actionType, id)
 }
 </script>

src/views/system/post/post.data.ts

@@ -8,10 +8,10 @@ export const rules = reactive({
   sort: [required]
 })
 
-// CrudSchema
+// 增删改查 CrudSchema 配置
 const crudSchemas = reactive<VxeCrudSchema>({
   primaryKey: 'id',
-  primaryType: 'seq',
+  primaryType: 'id',
   primaryTitle: '岗位编号',
   action: true,
   columns: [
@@ -27,7 +27,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
     },
     {
       title: '岗位顺序',
-      field: 'sort'
+      field: 'sort',
+      form: {
+        component: 'InputNumber'
+      }
     },
     {
       title: t('common.status'),
@@ -45,7 +48,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: t('common.createTime'),
       field: 'createTime',
       formatter: 'formatDate',
-      isForm: false
+      isForm: false,
+      table: {
+        width: 180
+      }
     }
   ]
 })