diff --git a/src/views/system/post/form.vue b/src/views/system/post/form.vue
index 065aecaf..d5d65dd1 100644
--- a/src/views/system/post/form.vue
+++ b/src/views/system/post/form.vue
@@ -1,81 +1,96 @@
<template>
- <!-- 弹窗 -->
- <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
- <!-- 表单：添加/修改 -->
- <Form
+ <Dialog :title="modelTitle" v-model="modelVisible" width="800">
+ <el-form
ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- />
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="岗位标题" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入岗位标题" />
+ </el-form-item>
+ <el-form-item label="岗位编码" prop="code">
+ <el-input :model-value="formData.code" placeholder="请输入岗位编码" height="150px" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="formData.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="parseInt(dict.value)"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" type="textarea" placeholder="请输备注" />
+ </el-form-item>
+ </el-form>
<template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
+ <div class="dialog-footer">
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
+ </div>
</template>
- </XModal>
+ </Dialog>
</template>
<script setup lang="ts">
-import type { FormExpose } from '@/components/Form'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as PostApi from '@/api/system/post'
-import { rules, allSchemas } from './post.data'
+
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-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 modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ name: '',
+ code: '',
+ status: undefined,
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
+ code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
+ status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
+ remark: [{ required: false, message: '岗位内容不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
-// 打开弹窗
+/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
modelVisible.value = true
- modelLoading.value = true
modelTitle.value = t('action.' + type)
- actionType.value = type
- // 设置数据
+ formType.value = type
+ resetForm()
+ // 修改时，设置数据
if (id) {
- const res = await PostApi.getPostApi(id)
- if (type === 'update') {
- unref(formRef)?.setValues(res)
- } else if (type === 'detail') {
- detailData.value = res
+ formLoading.value = true
+ try {
+ formData.value = await PostApi.getPostApi(id)
+ } finally {
+ formLoading.value = false
}
}
- modelLoading.value = false
}
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
-// 提交新增/修改的表单
+/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- const valid = await elForm.validate()
+ if (!formRef) return
+ const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
- actionLoading.value = true
+ formLoading.value = true
try {
- const data = unref(formRef)?.formModel as PostApi.PostVO
- if (actionType.value === 'create') {
+ const data = formData.value as unknown as PostApi.PostVO
+ if (formType.value === 'create') {
await PostApi.createPostApi(data)
message.success(t('common.createSuccess'))
} else {
@@ -83,9 +98,23 @@ const submitForm = async () => {
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
+ // 发送操作成功的事件
emit('success')
} finally {
- actionLoading.value = false
+ formLoading.value = false
}
}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ title: '',
+ type: undefined,
+ content: '',
+ status: undefined,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
</script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index c5a13e1e..321b5ae3 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,71 +1,192 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form-item label="岗位名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入岗位名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="岗位编码" prop="code">
+ <el-input
+ v-model="queryParams.code"
+ placeholder="请输入岗位编码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="parseInt(dict.value)"
+ />
+ </el-select>
+ </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"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:post:create']"
@click="openModal('create')"
- />
- <!-- 操作：导出 -->
- <XButton
- type="primary"
+ v-hasPermi="['system:notice:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
plain
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['system:post:export']"
- @click="exportList('岗位列表.xls')"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:post:update']"
- @click="openModal('update', row?.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:post:query']"
- @click="openModal('detail', row?.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.delete')"
- v-hasPermi="['system:post:delete']"
- @click="deleteData(row?.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 表单弹窗：添加/修改/详情 -->
- <PostForm ref="modalRef" @success="reload()" />
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['infra:config:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+
+ <!-- 列表 -->
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="岗位编号" align="center" prop="id" />
+ <el-table-column label="岗位名称" align="center" prop="name" />
+ <el-table-column label="岗位编码" align="center" prop="code" />
+ <el-table-column label="岗位顺序" align="center" prop="sort" />
+ <el-table-column label="岗位备注" align="center" prop="remark" />
+
+ <el-table-column label="状态" align="center" prop="status">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:post:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:post:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </content-wrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <post-form ref="modalRef" @success="getList" />
</template>
-<script setup lang="ts" name="Post">
+<script setup lang="tsx">
import * as PostApi from '@/api/system/post'
-import { allSchemas } from './post.data'
import PostForm from './form.vue'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DictTag } from '@/components/DictTag'
+
+const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas, // 列表配置
- getListApi: PostApi.getPostPageApi, // 加载列表的 API
- deleteApi: PostApi.deletePostApi, // 删除数据的 API
- exportListApi: PostApi.exportPostApi // 导出数据的 API
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ code: '',
+ name: '',
+ status: undefined,
+ pageNo: 1,
+ pageSize: 100
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+/** 查询岗位列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await PostApi.getPostPageApi(queryParams)
-// 表单相关的变量
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await PostApi.exportPostApi(queryParams)
+ download.excel(data, '岗位列表.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await PostApi.deletePostApi(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/post/post.data.ts b/src/views/system/post/post.data.ts
deleted file mode 100644
index 4926bcc6..00000000
--- a/src/views/system/post/post.data.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- code: [required],
- sort: [required]
-})
-
-// 增删改查 CrudSchema 配置
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '岗位编号',
- action: true,
- columns: [
- {
- title: '岗位名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '岗位编码',
- field: 'code',
- isSearch: true
- },
- {
- title: '岗位顺序',
- field: 'sort',
- form: {
- component: 'InputNumber'
- }
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '备注',
- field: 'remark',
- isTable: false
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- table: {
- width: 180
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)