Skip to content

phsl / admin

Go to a project
Commit b347ca1e by 芋道源码 Committed by Gitee
Options

!24 Vue3 重构：基础设施 -> 配置管理功能 

Merge pull request !24 from 芋道源码/dev
parents 67873d93 74d225cc
Showing with 799 additions and 372 deletions
src/api/infra/config/index.ts
import request from '@/config/axios'
export interface ConfigVO {
id: number
id: number | undefined
category: string
name: string
key: string
......@@ -12,13 +12,6 @@ export interface ConfigVO {
createTime: Date
}
export interface ConfigPageReqVO extends PageParam {
name?: string
key?: string
type?: number
createTime?: Date[]
}
export interface ConfigExportReqVO {
name?: string
key?: string
......@@ -27,32 +20,32 @@ export interface ConfigExportReqVO {
}
// 查询参数列表
export const getConfigPageApi = (params: ConfigPageReqVO) => {
export const getConfigPage = (params: PageParam) => {
return request.get({ url: '/infra/config/page', params })
}
// 查询参数详情
export const getConfigApi = (id: number) => {
export const getConfig = (id: number) => {
return request.get({ url: '/infra/config/get?id=' + id })
}
// 根据参数键名查询参数值
export const getConfigKeyApi = (configKey: string) => {
export const getConfigKey = (configKey: string) => {
return request.get({ url: '/infra/config/get-value-by-key?key=' + configKey })
}
// 新增参数
export const createConfigApi = (data: ConfigVO) => {
export const createConfig = (data: ConfigVO) => {
return request.post({ url: '/infra/config/create', data })
}
// 修改参数
export const updateConfigApi = (data: ConfigVO) => {
export const updateConfig = (data: ConfigVO) => {
return request.put({ url: '/infra/config/update', data })
}
// 删除参数
export const deleteConfigApi = (id: number) => {
export const deleteConfig = (id: number) => {
return request.delete({ url: '/infra/config/delete?id=' + id })
}
......
src/components/Dialog/src/Dialog.vue
......@@ -8,8 +8,9 @@ const props = defineProps({
modelValue: propTypes.bool.def(false),
title: propTypes.string.def('Dialog'),
fullscreen: propTypes.bool.def(true),
maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
width: propTypes.oneOfType([String, Number]).def('40%')
width: propTypes.oneOfType([String, Number]).def('40%'),
scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
maxHeight: propTypes.oneOfType([String, Number]).def('300px')
})
const getBindValue = computed(() => {
......@@ -35,6 +36,7 @@ const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : pr
watch(
() => isFullscreen.value,
async (val: boolean) => {
// 计算最大高度
await nextTick()
if (val) {
const windowHeight = document.documentElement.offsetHeight
......@@ -80,9 +82,12 @@ const dialogStyle = computed(() => {
</div>
</template>
<ElScrollbar :style="dialogStyle">
<!-- 情况一：如果 scroll 为 true，说明开启滚动条 -->
<ElScrollbar :style="dialogStyle" v-if="scroll">
<slot></slot>
</ElScrollbar>
<!-- 情况二：如果 scroll 为 false，说明关闭滚动条滚动条 -->
<slot v-else></slot>
<template v-if="slots.footer" #footer>
<slot name="footer"></slot>
......
src/components/DictTag/src/DictTag.vue
......@@ -34,7 +34,7 @@ export default defineComponent({
return null
}
// 解决自定义字典标签值为零时标签不渲染的问题
if (!props.value && props.value !== 0) {
if (props.value === undefined) {
return null
}
getDictObj(props.type, props.value.toString())
......
src/components/Pagination/index.vue 0 → 100644
<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
<template>
<el-pagination
v-show="total > 0"
class="float-right mt-15px mb-15px"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[10, 20, 30, 50]"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:pager-count="pagerCount"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
// 总条目数
total: {
required: true,
type: Number
},
// 当前页数：pageNo
page: {
type: Number,
default: 1
},
// 每页显示条目个数：pageSize
limit: {
type: Number,
default: 20
},
// 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
// 移动端页码按钮的数量端默认值 5
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7
}
})
const emit = defineEmits(['update:page', 'update:limit', 'pagination', 'pagination'])
const currentPage = computed({
get() {
return props.page
},
set(val) {
// 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
emit('update:page', val)
}
})
const pageSize = computed({
get() {
return props.limit
},
set(val) {
// 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
emit('update:limit', val)
}
})
const handleSizeChange = (val) => {
// 如果修改后超过最大页面，强制跳转到第 1 页
if (currentPage.value * val > props.total) {
currentPage.value = 1
}
// 触发 pagination 事件，重新加载列表
emit('pagination', { page: currentPage.value, limit: val })
}
const handleCurrentChange = (val) => {
// 触发 pagination 事件，重新加载列表
emit('pagination', { page: val, limit: pageSize.value })
}
</script>
src/config/axios/service.ts
......@@ -170,7 +170,6 @@ service.interceptors.response.use(
return Promise.reject(new Error(msg))
} else if (code === 901) {
ElMessage.error({
duration: 5,
offset: 300,
dangerouslyUseHTMLString: true,
message:
......
src/types/auto-components.d.ts
......@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton']
......@@ -34,6 +35,7 @@ declare module '@vue/runtime-core' {
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
......@@ -91,6 +93,7 @@ declare module '@vue/runtime-core' {
ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
Pagination: typeof import('./../components/Pagination/index.vue')['default']
ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']
......
src/utils/dict.ts
......@@ -55,7 +55,7 @@ export const getBoolDictOptions = (dictType: string) => {
dictOptions.forEach((dict: DictDataType) => {
dictOption.push({
...dict,
value: dict.value + '' === 'true' ? true : false
value: dict.value + '' === 'true'
})
})
return dictOption
......
src/utils/formatTime.ts
import dayjs from 'dayjs'
/**
* 时间日期转换
* @param date 当前时间，new Date() 格式
......@@ -174,3 +176,18 @@ export function formatPast2(ms) {
return 0 + '秒'
}
}
/**
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
*
* @param row 行数据
* @param column 字段
* @param cellValue 字段值
*/
// @ts-ignore
export const dateFormatter = (row, column, cellValue) => {
if (!cellValue) {
return
}
return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
}
src/views/infra/config/config.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
category: [required],
name: [required],
key: [required],
value: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '参数分类',
field: 'category'
},
{
title: '参数名称',
field: 'name',
isSearch: true
},
{
title: '参数键名',
field: 'key',
isSearch: true
},
{
title: '参数键值',
field: 'value'
},
{
title: '系统内置',
field: 'type',
dictType: DICT_TYPE.INFRA_CONFIG_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '是否可见',
field: 'visible',
table: {
slots: {
default: 'visible_default'
}
},
form: {
component: 'RadioButton',
componentProps: {
options: [
{ label: '是', value: true },
{ label: '否', value: false }
]
}
}
},
{
title: t('form.remark'),
field: 'remark',
isTable: false,
form: {
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/infra/config/form.vue 0 → 100644
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-form-item label="参数分类" prop="category">
<el-input v-model="formData.category" placeholder="请输入参数分类" />
</el-form-item>
<el-form-item label="参数名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入参数名称" />
</el-form-item>
<el-form-item label="参数键名" prop="key">
<el-input v-model="formData.key" placeholder="请输入参数键名" />
</el-form-item>
<el-form-item label="参数键值" prop="value">
<el-input v-model="formData.value" placeholder="请输入参数键值" />
</el-form-item>
<el-form-item label="是否可见" prop="visible">
<el-radio-group v-model="formData.visible">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</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>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
import * as ConfigApi from '@/api/infra/config'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
category: '',
name: '',
key: '',
value: '',
visible: true,
remark: ''
})
const formRules = reactive({
category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ConfigApi.getConfig(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as ConfigApi.ConfigVO
if (formType.value === 'create') {
await ConfigApi.createConfig(data)
message.success(t('common.createSuccess'))
} else {
await ConfigApi.updateConfig(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
category: '',
name: '',
key: '',
value: '',
visible: true,
remark: ''
}
formRef.value?.resetFields()
}
</script>
src/views/infra/config/index.vue
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['infra:config:create']"
@click="handleCreate()"
<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"
/>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['infra:config:export']"
@click="exportList('配置.xls')"
</el-form-item>
<el-form-item label="参数键名" prop="key">
<el-input
v-model="queryParams.key"
placeholder="请输入参数键名"
clearable
@keyup.enter="handleQuery"
/>
</template>
<template #visible_default="{ row }">
<span>{{ row.visible ? '是' : '否' }} </span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:config:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:config:query']"
@click="handleDetail(row.id)"
</el-form-item>
<el-form-item label="系统内置" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择系统内置" clearable>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(dict.value)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:config:delete']"
@click="deleteData(row.id)"
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/>
</template>
</XTable>
</ContentWrap>
</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" @click="openModal('create')" v-hasPermi="['infra:config:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['infra:config:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
<!-- 列表 -->
<el-table v-loading="loading" :data="list" align="center">
<el-table-column label="参数主键" align="center" prop="id" />
<el-table-column label="参数分类" align="center" prop="category" />
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
<el-table-column label="参数键值" align="center" prop="value" />
<el-table-column label="是否可见" align="center" prop="visible">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
</template>
</el-table-column>
<el-table-column label="系统内置" align="center" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['infra:config:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:config:delete']"
>
<template #visible="{ row }">
<span>{{ row.visible ? '是' : '否' }} </span>
删除
</el-button>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</content-wrap>
<!-- 表单弹窗：添加/修改 -->
<config-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="Config">
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as ConfigApi from '@/api/infra/config'
import { rules, allSchemas } from './config.data'
const { t } = useI18n() // 国际化
import ConfigForm from './form.vue'
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: ConfigApi.getConfigPageApi,
deleteApi: ConfigApi.deleteConfigApi,
exportListApi: ConfigApi.exportConfigApi
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
key: undefined,
type: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await ConfigApi.getConfigPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await ConfigApi.getConfigApi(rowId)
unref(formRef)?.setValues(res)
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
const res = await ConfigApi.getConfigApi(rowId)
detailData.value = res
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ConfigApi.deleteConfig(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
/** 导出按钮操作 */
const handleExport = async () => {
try {
const data = unref(formRef)?.formModel as ConfigApi.ConfigVO
if (actionType.value === 'create') {
await ConfigApi.createConfigApi(data)
message.success(t('common.createSuccess'))
} else {
await ConfigApi.updateConfigApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ConfigApi.exportConfigApi(queryParams)
download.excel(data, '参数配置.xls')
} catch {
} finally {
actionLoading.value = false
// 刷新列表
await reload()
}
exportLoading.value = false
}
})
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/system/notice/index.vue
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作：新增 -->
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:notice:create']"
@click="handleCreate()"
<el-form ref="searchForm" :model="queryParms" :inline="true">
<el-form-item label="公告标题">
<el-input v-model="queryParms.title" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParms.status">
<el-option label="全部" value="" />
<el-option label="开启" :value="1" />
<el-option label="关闭" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">Query</el-button>
</el-form-item>
</el-form>
<div style="width: 100%; height: 600px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:data="tableData"
:width="width"
:height="height - 50"
fixed
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['system:notice:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['system:notice:query']"
@click="handleDetail(row.id)"
</el-auto-resizer>
</div>
<div class="mt-2">
<el-pagination
:current-page="queryParms.pageNo"
:page-size="queryParms.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="tableTotal"
@size-change="getList"
@current-change="getList"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['system:notice:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</div>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
ref="formRef"
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #content="{ row }">
<Editor :model-value="row.content" :readonly="true" />
</template>
</Descriptions>
<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="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Notice">
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
<script setup lang="tsx">
import dayjs from 'dayjs'
import { Column, ElPagination, ElTableV2, TableV2FixedDir } from 'element-plus'
import * as NoticeApi from '@/api/system/notice'
import { rules, allSchemas } from './notice.data'
import { XTextButton } from '@/components/XButton'
import { DictTag } from '@/components/DictTag'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi
})
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const actionType = ref('') // 操作按钮的类型
const actionLoading = ref(false) // 按钮 Loading
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
const columns: Column<any>[] = [
{
key: 'id',
dataKey: 'id', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
title: 'id', //显示在单元格表头的文本
width: 80, //当前列的宽度，必须设置
fixed: true //是否固定列
},
{
key: 'title',
dataKey: 'title',
title: '公告标题',
width: 180
},
{
key: 'type',
dataKey: 'type',
title: '公告类型',
width: 180,
cellRenderer: ({ cellData: type }) => (
<DictTag type={DICT_TYPE.SYSTEM_NOTICE_TYPE} value={type}></DictTag>
)
},
{
key: 'status',
dataKey: 'status',
title: t('common.status'),
width: 180,
cellRenderer: ({ cellData: status }) => (
<DictTag type={DICT_TYPE.COMMON_STATUS} value={status}></DictTag>
)
},
{
key: 'content',
dataKey: 'content',
title: '公告内容',
width: 400,
cellRenderer: ({ cellData: content }) => <span v-html={content}></span>
},
{
key: 'createTime',
dataKey: 'createTime',
title: t('common.createTime'),
width: 180,
cellRenderer: ({ cellData: createTime }) => (
<>{dayjs(createTime).format('YYYY-MM-DD HH:mm:ss')}</>
)
},
{
key: 'actionbtns',
dataKey: 'actionbtns', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
title: '操作', //显示在单元格表头的文本
width: 160, //当前列的宽度，必须设置
fixed: TableV2FixedDir.RIGHT, //是否固定列
align: 'center',
cellRenderer: ({ cellData: id }) => (
<>
<XTextButton
preIcon="ep:delete"
title={t('action.edit')}
onClick={handleUpdate.bind(this, id)}
></XTextButton>
<XTextButton
preIcon="ep:delete"
title={t('action.del')}
onClick={handleDelete.bind(this, id)}
></XTextButton>
</>
)
}
]
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
const tableData = ref([])
const tableTotal = ref(0)
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await NoticeApi.getNoticeApi(rowId)
unref(formRef)?.setValues(res)
const queryParms = reactive({
title: '',
status: undefined,
pageNo: 1,
pageSize: 100
})
const getList = async () => {
const res = await NoticeApi.getNoticePageApi(queryParms)
tableData.value = res.list
tableTotal.value = res.total
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
// 设置数据
const res = await NoticeApi.getNoticeApi(rowId)
detailData.value = res
const handleUpdate = (id) => {
console.info(id)
}
// 提交新增/修改的表单
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
if (actionType.value === 'create') {
await NoticeApi.createNoticeApi(data)
message.success(t('common.createSuccess'))
} else {
await NoticeApi.updateNoticeApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
await reload()
}
}
})
const handleDelete = (id) => {
console.info(id)
}
getList()
</script>
src/views/system/notice/indexd.vue 0 → 100644
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作：新增 -->
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:notice:create']"
@click="handleCreate()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['system:notice:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['system:notice:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['system:notice:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
ref="formRef"
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #content="{ row }">
<Editor :model-value="row.content" :readonly="true" />
</template>
</Descriptions>
<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="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Notice">
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as NoticeApi from '@/api/system/notice'
import { rules, allSchemas } from './notice.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi
})
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const actionType = ref('') // 操作按钮的类型
const actionLoading = ref(false) // 按钮 Loading
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await NoticeApi.getNoticeApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
// 设置数据
const res = await NoticeApi.getNoticeApi(rowId)
detailData.value = res
}
// 提交新增/修改的表单
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
if (actionType.value === 'create') {
await NoticeApi.createNoticeApi(data)
message.success(t('common.createSuccess'))
} else {
await NoticeApi.updateNoticeApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
await reload()
}
}
})
}
</script>
src/views/system/notice/indexh.vue 0 → 100644
<template>
<ContentWrap>
<div style="width: 100%; height: 500px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
</template>
</el-auto-resizer>
<el-pagination
:current-page="queryParms.pageNo"
:page-size="queryParms.pageSize"
layout="total, prev, pager, next"
:total="tableTotal"
@size-change="getList"
@current-change="getList"
/>
</div>
</ContentWrap>
</template>
<script setup lang="ts">
import { Column, TableV2FixedDir } from 'element-plus'
import * as NoticeApi from '@/api/system/notice'
import { XTextButton } from '@/components/XButton'
const { t } = useI18n() // 国际化
const columns: Column<any>[] = [
{
key: 'id',
dataKey: 'id', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
title: 'id', //显示在单元格表头的文本
width: 80, //当前列的宽度，必须设置
fixed: true //是否固定列
},
{
key: 'title',
dataKey: 'title',
title: '公告标题',
width: 180
},
{
key: 'type',
dataKey: 'type',
title: '公告类型',
width: 180
},
{
key: 'status',
dataKey: 'status',
title: t('common.status'),
width: 180
},
{
key: 'content',
dataKey: 'content',
title: '公告内容',
width: 180
},
{
key: 'createTime',
dataKey: 'createTime',
title: t('common.createTime'),
width: 180
},
{
key: 'actionbtns',
dataKey: 'actionbtns', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
title: '操作', //显示在单元格表头的文本
width: 80, //当前列的宽度，必须设置
fixed: TableV2FixedDir.RIGHT, //是否固定列
align: 'center',
cellRenderer: (date) =>
h(XTextButton, {
onClick: () => handleDelete(date.rowData),
type: 'danger',
preIcon: 'ep:delete',
title: t('action.del')
})
}
]
const tableData = ref([])
const tableTotal = ref(0)
const queryParms = reactive({
title: '',
status: undefined,
pageNo: 1,
pageSize: 10
})
const getList = async () => {
const res = await NoticeApi.getNoticePageApi(queryParms)
tableData.value = res.list
tableTotal.value = res.total
}
const handleDelete = (row) => {
console.info(row.id)
}
getList()
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment