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

d985ef19 · YunaiV · 5e47af93 · d985ef19 · d985ef19 · d985ef19
Commit d985ef19 authored Feb 11, 2023 by YunaiV
Showing with 56 additions and 42 deletions

src/components/Form/src/helper.ts
+2 -2

src/locales/en.ts
+1 -0

src/locales/zh-CN.ts
+1 -0

src/views/system/post/form.vue
+24 -23

src/views/system/post/index.vue
+18 -13

src/views/system/post/post.data.ts
+10 -4

No files found.
--- a/src/components/Form/src/helper.ts
+++ b/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
      }
    }
  }

--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -281,6 +281,7 @@ export default {
    create: 'Create',
    add: 'Add',
    del: 'Delete',
+    delete: 'Delete',
    edit: 'Edit',
    update: 'Update',
    preview: 'Preview',

--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -281,6 +281,7 @@ export default {
    create: '新增',
    add: '新增',
    del: '删除',
+    delete: '删除',
    edit: '编辑',
    update: '编辑',
    preview: '预览',

--- a/src/views/system/post/PostForm.vue
+++ b/src/views/system/post/PostForm.vue
 <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) {
+  if (!valid) {
-    actionLoading.value = true
+    return
-    // 提交请求
+  }
-    try {
+  // 提交请求
-      const data = unref(formRef)?.formModel as PostApi.PostVO
+  actionLoading.value = true
-      if (actionType.value === 'create') {
+  try {
-        await PostApi.createPostApi(data)
+    const data = unref(formRef)?.formModel as PostApi.PostVO
-        message.success(t('common.createSuccess'))
+    if (actionType.value === 'create') {
-      } else {
+      await PostApi.createPostApi(data)
-        await PostApi.updatePostApi(data)
+      message.success(t('common.createSuccess'))
-        message.success(t('common.updateSuccess'))
+    } else {
-      }
+      await PostApi.updatePostApi(data)
-      modelVisible.value = false
+      message.success(t('common.updateSuccess'))
-      emit('success')
-    } finally {
-      actionLoading.value = false
    }
+    modelVisible.value = false
+    emit('success')
+  } finally {
+    actionLoading.value = false
  }
 }
-defineExpose({ openModal: openModal })
 </script>
--- a/src/views/system/post/index.vue
+++ b/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,
+  allSchemas: allSchemas, // 列表配置
-  getListApi: PostApi.getPostPageApi,
+  getListApi: PostApi.getPostPageApi, // 加载列表的 API
-  deleteApi: PostApi.deletePostApi,
+  deleteApi: PostApi.deletePostApi, // 删除数据的 API
-  exportListApi: PostApi.exportPostApi
+  exportListApi: PostApi.exportPostApi // 导出数据的 API
 })
 // 表单相关的变量
 const modalRef = ref()
-const openModal = (type: string, rowId?: number) => {
+const openModal = (actionType: string, id?: number) => {
-  modalRef.value.openModal(type, rowId)
+  modalRef.value.openModal(actionType, id)
 }
 </script>
--- a/src/views/system/post/post.data.ts
+++ b/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
+      }
    }
  ]
 })