diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts
index e2549cbd..9cab8ff1 100644
--- 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
}
}
}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index ed5bf72c..1600a19f 100644
--- 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',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 7faf145d..7c5742c4 100644
--- 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: '预览',
diff --git a/src/views/system/post/PostForm.vue b/src/views/system/post/form.vue
similarity index 70%
rename from src/views/system/post/PostForm.vue
rename to src/views/system/post/form.vue
index ab3a23af..357a27a2 100644
--- a/src/views/system/post/PostForm.vue
+++ b/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>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 92d4f83c..720d7bb0 100644
--- 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,
- 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>
diff --git a/src/views/system/post/post.data.ts b/src/views/system/post/post.data.ts
index 7a32b233..4926bcc6 100644
--- 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
+ }
}
]
})