feat 系统参数

This commit is contained in:
DaxPay
2024-07-11 18:52:35 +08:00
parent 8bac45d857
commit 916eaa8cfe
13 changed files with 466 additions and 28 deletions

View File

@@ -4,9 +4,9 @@ import { Result } from '#/axios'
/**
* 根据键名获取键值
*/
export function findByParamKey(key) {
export function findByKey(key) {
return defHttp.get<Result<string>>({
url: `/system/param/findByParamKey`,
url: `/system/param/findByKey`,
method: 'GET',
params: { key },
})

View File

@@ -11,7 +11,7 @@ import {
} from '@/logics/websocket/WebSockerType'
import { publishWsEvent } from '@/logics/websocket/WebsocketNotice'
import { useMessage } from '@/hooks/web/useMessage'
import { findByParamKey } from '@/api/common/Parameter'
import { findByKey } from '@/api/common/Parameter'
import { authEcho } from '@/api/common/BaseApi.api'
const { notification } = useMessage()
@@ -25,7 +25,7 @@ let wsClose: WebSocket['close']
export async function initWebSocket() {
const userStore = useUserStoreWithOut()
const token = userStore.getToken
const { data: wsUrl } = await findByParamKey('WebsocketServerUrl')
const { data: wsUrl } = await findByKey('WebsocketServerUrl')
// 判断token是否有效, 无效会自动退出
await authEcho('')
// 后端服务地址

View File

@@ -126,11 +126,10 @@
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if (formEditType.value === FormEditType.Add) {
await add(form)
await add(form).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(form)
await update(form).finally(() => (confirmLoading.value = false))
}
confirmLoading.value = false
handleCancel()
emits('ok')
})

View File

@@ -129,11 +129,10 @@ import { nextTick, reactive, ref, unref } from "vue";
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if (formEditType.value === FormEditType.Add) {
await add(form)
await add(form).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(form)
await update(form).finally(() => (confirmLoading.value = false))
}
confirmLoading.value = false
handleCancel()
emits('ok')
})

View File

@@ -0,0 +1,97 @@
import { defHttp } from '@/utils/http/axios'
import { PageResult, Result } from '#/axios'
import { BaseEntity } from '#/web'
/**
* 分页
*/
export const page = (params) => {
return defHttp.get<Result<PageResult<SystemParam>>>({
url: '/system/param/page',
params,
})
}
/**
* 获取单条
*/
export const get = (id) => {
return defHttp.get<Result<SystemParam>>({
url: '/system/param/findById',
params: { id },
})
}
/**
* 添加
*/
export const add = (obj: SystemParam) => {
return defHttp.post({
url: '/system/param/add',
data: obj,
})
}
/**
* 更新
*/
export const update = (obj: SystemParam) => {
return defHttp.post({
url: '/system/param/update',
data: obj,
})
}
/**
* 删除
*/
export const del = (id) => {
return defHttp.delete({
url: '/system/param/delete',
params: { id },
})
}
/**
* 查询全部
*/
export const findAll = () => {
return defHttp.get<Result<Array<SystemParam>>>({
url: '/system/param/findAll',
})
}
/**
* 编码是否被使用
*/
export const existsByKey = (key: string) => {
return defHttp.get<Result<boolean>>({
url: '/system/param/existsByKey',
params: { key },
})
}
export const existsByKeyNotId = (key: string, id) => {
return defHttp.get<Result<boolean>>({
url: '/system/param/existsByKeyNotId',
params: { key, id },
})
}
/**
* 系统参数配置
*/
export interface SystemParam extends BaseEntity {
// 参数名称
name?: string
// 参数键名
key?: string
// 参数值
value?: string
// 参数类型
type?: number
// 是否启用
enable?: boolean
// 内置参数
internal?: boolean
// 备注
remark?: string
}

View File

@@ -0,0 +1,191 @@
<template>
<basic-modal
v-bind="$attrs"
:loading="confirmLoading"
:width="modalWidth"
:title="title"
:open="visible"
:mask-closable="showable"
@cancel="handleCancel"
>
<a-form
class="small-from-item"
ref="formRef"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item label="主键" name="id" :hidden="true">
<a-input v-model:value="form.id" :disabled="showable" />
</a-form-item>
<a-form-item label="参数名称" name="name">
<a-input
v-model:value="form.name"
:disabled="showable || form.internal"
placeholder="请输入参数名称"
/>
</a-form-item>
<a-form-item label="参数Key" name="key">
<a-input
v-model:value="form.key"
:disabled="showable || form.internal"
placeholder="请输入参数键名"
/>
</a-form-item>
<a-form-item label="参数值" name="value">
<a-input v-model:value="form.value" :disabled="showable" placeholder="请输入参数值" />
</a-form-item>
<!-- <a-form-item label="参数类型" name="type">-->
<!-- <a-select-->
<!-- allowClear-->
<!-- :options="paramTypeList"-->
<!-- style="width: 220px"-->
<!-- :disabled="showable"-->
<!-- v-model:value="form.type"-->
<!-- placeholder="请选择状态"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="是否启用" name="enable">
<a-switch
checked-children="启用"
un-checked-children="停用"
v-model:checked="form.enable"
:disabled="showable"
/>
</a-form-item>
<a-form-item v-if="showable" label="系统内置" name="internal">
<a-switch
checked-children=""
un-checked-children=""
v-model:checked="form.internal"
disabled
/>
</a-form-item>
<a-form-item label="备注" name="remark">
<a-textarea
:rows="3"
v-model:value="form.remark"
:disabled="showable"
placeholder="请输入备注"
/>
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button key="cancel" @click="handleCancel">取消</a-button>
<a-button
v-if="!showable"
key="forward"
:loading="confirmLoading"
type="primary"
@click="handleOk"
>保存</a-button
>
</a-space>
</template>
</basic-modal>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import useFormEdit from '@/hooks/bootx/useFormEdit'
import { add, get, update, existsByKey, existsByKeyNotId, SystemParam } from './SystemParam.api'
import { FormInstance, Rule } from 'ant-design-vue/lib/form'
import { FormEditType } from '@/enums/formTypeEnum'
import { BasicModal } from '@/components/Modal'
import { useValidate } from '@/hooks/bootx/useValidate'
import { useDict } from '@/hooks/bootx/useDict'
import { LabeledValue } from 'ant-design-vue/lib/select'
const {
initFormEditType,
handleCancel,
labelCol,
wrapperCol,
modalWidth,
title,
confirmLoading,
visible,
showable,
formEditType,
} = useFormEdit()
const { existsByServer } = useValidate()
const { dictDropDownNumber } = useDict()
// 表单
const formRef = ref<FormInstance>()
let form = ref<SystemParam>({
id: null,
name: '',
key: '',
value: '',
enable: true,
type: undefined,
internal: false,
remark: '',
})
// 参数类型
let paramTypeList = ref<LabeledValue[]>([])
// 校验
const rules = reactive({
name: [{ required: true, message: '参数名称必填', trigger: ['blur', 'change'] }],
key: [
{ required: true, message: '参数Key必填', trigger: ['blur', 'change'] },
{ validator: validateKey, trigger: 'blur' },
],
value: [{ required: true, message: '参数内容必填', trigger: ['blur', 'change'] }],
// type: [{ required: true, message: '参数类型必填', trigger: ['blur', 'change'] }],
} as Record<string, Rule[]>)
// 事件
const emits = defineEmits(['ok'])
// 入口
function init(id, editType: FormEditType) {
initFormEditType(editType)
resetForm()
getInfo(id, editType)
dictDropDownNumber('ParamType').then((res) => (paramTypeList.value = res))
}
// 获取信息
function getInfo(id, editType: FormEditType) {
if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
confirmLoading.value = true
get(id).then(({ data }) => {
form.value = data
confirmLoading.value = false
})
} else {
confirmLoading.value = false
}
}
// 保存
function handleOk() {
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if (formEditType.value === FormEditType.Add) {
await add(form.value).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(form.value).finally(() => (confirmLoading.value = false))
}
handleCancel()
emits('ok')
})
}
// 重置表单的校验
function resetForm() {
nextTick(() => {
formRef.value?.resetFields()
})
}
// 校验key值
async function validateKey() {
const { key, id } = form.value
return existsByServer(key, id, formEditType.value, existsByKey, existsByKeyNotId, '该Key已存在')
}
defineExpose({
init,
})
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,152 @@
<template>
<div>
<div class="m-3 p-3 pt-5 bg-white">
<b-query
:query-params="model.queryParam"
:fields="fields"
@query="queryPage"
@reset="resetQueryParams"
/>
</div>
<div class="m-3 p-3 bg-white">
<vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }">
<template #buttons>
<a-space>
<a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add"
>新建</a-button
>
</a-space>
</template>
</vxe-toolbar>
<vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
<vxe-column type="seq" :min-width="60" />
<vxe-column field="name" title="参数名称" :min-width="200" />
<vxe-column field="key" title="参数Key" :min-width="150" />
<vxe-column field="value" title="参数值" :min-width="200" />
<vxe-column field="type" title="参数类型" :min-width="80">
<template #default="{ row }">
<a-tag>{{ dictConvert('ParamType', row.type) || '无' }}</a-tag>
</template>
</vxe-column>
<vxe-column field="enable" title="启用状态" :min-width="80">
<template #default="{ row }">
<a-tag v-if="row.enable" color="green">启用</a-tag>
<a-tag v-else color="red">停用</a-tag>
</template>
</vxe-column>
<vxe-column field="internal" title="内置参数" :min-width="80">
<template #default="{ row }">
<a-tag v-if="row.internal" color="red"></a-tag>
<a-tag v-else color="green"></a-tag>
</template>
</vxe-column>
<vxe-column field="remark" title="备注" :min-width="220" />
<vxe-column field="createTime" title="创建时间" :min-width="160" />
<vxe-column fixed="right" width="150" :showOverflow="false" title="操作" :min-width="150">
<template #default="{ row }">
<span>
<a href="javascript:" @click="show(row)">查看</a>
</span>
<a-divider type="vertical" />
<span>
<a href="javascript:" @click="edit(row)">编辑</a>
</span>
<template v-if="!row.internal">
<a-divider type="vertical" />
<a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
<a href="javascript:" style="color: red">删除</a>
</a-popconfirm>
</template>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
size="medium"
:loading="loading"
:current-page="pagination.current"
:page-size="pagination.size"
:total="pagination.total"
@page-change="handleTableChange"
/>
<SystemParamEdit ref="systemParamEdit" @ok="queryPage" />
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { del, page } from './SystemParam.api'
import useTablePage from '@/hooks/bootx/useTablePage'
import SystemParamEdit from './SystemParamEdit.vue'
import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
import BQuery from '/@/components/Bootx/Query/BQuery.vue'
import { FormEditType } from '@/enums/formTypeEnum'
import { useMessage } from '@/hooks/web/useMessage'
import { QueryField, STRING } from '@/components/Bootx/Query/Query'
import { useDict } from '@/hooks/bootx/useDict'
// 使用hooks
const {
handleTableChange,
pageQueryResHandel,
resetQueryParams,
pagination,
pages,
model,
loading,
} = useTablePage(queryPage)
const { createMessage } = useMessage()
const { dictConvert } = useDict()
// 查询条件
const fields = [
{ field: 'name', type: STRING, name: '参数名称', placeholder: '请输入参数名称' },
{ field: 'key', type: STRING, name: '参数Key', placeholder: '请输入参数Key' },
] as QueryField[]
const xTable = ref<VxeTableInstance>()
const xToolbar = ref<VxeToolbarInstance>()
const systemParamEdit = ref<any>()
onMounted(() => {
vxeBind()
queryPage()
})
function vxeBind() {
xTable.value?.connect(xToolbar.value as VxeToolbarInstance)
}
// 分页查询
function queryPage() {
loading.value = true
page({
...model.queryParam,
...pages,
}).then(({ data }) => {
pageQueryResHandel(data)
})
return Promise.resolve()
}
// 新增
function add() {
systemParamEdit.value.init(null, FormEditType.Add)
}
// 查看
function edit(record) {
systemParamEdit.value.init(record.id, FormEditType.Edit)
}
// 查看
function show(record) {
systemParamEdit.value.init(record.id, FormEditType.Show)
}
// 删除
function remove(record) {
del(record.id).then(() => {
createMessage.success('删除成功')
queryPage()
})
}
</script>
<style lang="less" scoped></style>

View File

@@ -115,11 +115,10 @@
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if (formEditType.value === FormEditType.Add) {
await add(form.value)
await add(form.value).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(form.value)
await update(form.value).finally(() => (confirmLoading.value = false))
}
confirmLoading.value = false
handleCancel()
emits('ok')
})

View File

@@ -164,11 +164,10 @@
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if (formEditType.value === FormEditType.Add) {
await add(form.value)
await add(form.value).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(form.value)
await update(form.value).finally(() => (confirmLoading.value = false))
}
confirmLoading.value = false
handleCancel()
emits('ok')
})

View File

@@ -274,11 +274,10 @@
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if ([FormEditType.Add, FormEditType.Other].includes(formEditType.value)) {
await add(form.value)
await add(form.value).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(form.value)
await update(form.value).finally(() => (confirmLoading.value = false))
}
confirmLoading.value = false
handleCancel()
emits('ok')
})

View File

@@ -154,11 +154,10 @@
formRef.value?.validate().then(async () => {
confirmLoading.value = true
if (formEditType.value === FormEditType.Add) {
await add(unref(form))
await add(unref(form)).finally(() => (confirmLoading.value = false))
} else if (formEditType.value === FormEditType.Edit) {
await update(unref(form))
await update(unref(form)).finally(() => (confirmLoading.value = false))
}
confirmLoading.value = false
handleCancel()
emits('ok')
})

View File

@@ -171,10 +171,12 @@
clientCode: clientCode.value,
updateChildren,
menuIds: checkedKeys.value,
}).then(() => {
createMessage.success('保存成功')
handleCancel()
})
.then(() => {
createMessage.success('保存成功')
handleCancel()
})
.finally(() => (loading.value = false))
}
/**

View File

@@ -168,10 +168,12 @@
clientCode: clientCode.value,
updateChildren,
pathIds: checkedKeys.value,
}).then(() => {
createMessage.success('保存成功')
handleCancel()
})
.then(() => {
createMessage.success('保存成功')
handleCancel()
})
.finally(() => (loading.value = false))
}
/**