|
|
@@ -0,0 +1,382 @@
|
|
|
+<template>
|
|
|
+ <div class="system-page config-page">
|
|
|
+ <el-card class="page-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <el-icon :size="20" color="#409EFF"><Setting /></el-icon>
|
|
|
+ <span class="page-title">参数设置</span>
|
|
|
+ </div>
|
|
|
+ <div class="search-right">
|
|
|
+ <el-button type="primary" v-hasPermi="['system:config:add']" @click="handleAdd">
|
|
|
+ <el-icon><Plus /></el-icon> 新增
|
|
|
+ </el-button>
|
|
|
+ <el-button type="success" v-hasPermi="['system:config:edit']" :disabled="single" @click="handleUpdate()">
|
|
|
+ <el-icon><Edit /></el-icon> 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" v-hasPermi="['system:config:remove']" :disabled="multiple" @click="handleDelete()">
|
|
|
+ <el-icon><Delete /></el-icon> 删除
|
|
|
+ </el-button>
|
|
|
+ <el-button type="warning" v-hasPermi="['system:config:export']" @click="handleExport">
|
|
|
+ <el-icon><Download /></el-icon> 导出
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" v-hasPermi="['system:config:remove']" @click="handleRefreshCache">
|
|
|
+ <el-icon><Refresh /></el-icon> 刷新缓存
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <div class="search-bar" v-show="showSearch">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
|
+ <el-form-item label="参数名称" prop="configName">
|
|
|
+ <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参数键名" prop="configKey">
|
|
|
+ <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="系统内置" prop="configType">
|
|
|
+ <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
|
|
|
+ <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间" style="width: 308px">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleQuery">
|
|
|
+ <el-icon><Search /></el-icon> 搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="resetQuery">
|
|
|
+ <el-icon><RefreshRight /></el-icon> 重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 参数列表 -->
|
|
|
+ <el-table v-loading="loading" :data="configList" style="width: 100%" border @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="45" />
|
|
|
+ <el-table-column v-if="false" label="参数主键" align="center" prop="configId" />
|
|
|
+ <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="系统内置" align="center" prop="configType">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <dict-tag :options="sys_yes_no" :value="row.configType" />
|
|
|
+ </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">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ proxy.parseTime(row.createTime) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="150" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" v-hasPermi="['system:config:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
|
|
|
+ <el-button link type="danger" v-hasPermi="['system:config:remove']" @click="handleDelete(row)"> 删除 </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ v-model:current-page="queryParams.pageNum"
|
|
|
+ v-model:page-size="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="getList"
|
|
|
+ @current-change="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 新增/编辑对话框 -->
|
|
|
+ <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" top="5vh" append-to-body @close="cancel">
|
|
|
+ <el-form ref="configFormRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="参数名称" prop="configName">
|
|
|
+ <el-input v-model="form.configName" placeholder="请输入参数名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参数键名" prop="configKey">
|
|
|
+ <el-input v-model="form.configKey" placeholder="请输入参数键名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参数键值" prop="configValue">
|
|
|
+ <el-input v-model="form.configValue" type="textarea" placeholder="请输入参数键值" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="系统内置" prop="configType">
|
|
|
+ <el-radio-group v-model="form.configType">
|
|
|
+ <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialog.visible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="Config" lang="ts">
|
|
|
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config'
|
|
|
+import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types'
|
|
|
+import { Plus, Edit, Delete, Download, Search, RefreshRight, Setting } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
|
|
+const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'))
|
|
|
+
|
|
|
+const configList = ref<ConfigVO[]>([])
|
|
|
+const loading = ref(true)
|
|
|
+const showSearch = ref(true)
|
|
|
+const ids = ref<Array<number | string>>([])
|
|
|
+const single = ref(true)
|
|
|
+const multiple = ref(true)
|
|
|
+const total = ref(0)
|
|
|
+const dateRange = ref<[DateModelType, DateModelType]>(['', ''])
|
|
|
+
|
|
|
+const queryFormRef = ref<ElFormInstance>()
|
|
|
+const configFormRef = ref<ElFormInstance>()
|
|
|
+const dialog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: ''
|
|
|
+})
|
|
|
+const initFormData: ConfigForm = {
|
|
|
+ configId: undefined,
|
|
|
+ configName: '',
|
|
|
+ configKey: '',
|
|
|
+ configValue: '',
|
|
|
+ configType: 'Y',
|
|
|
+ remark: ''
|
|
|
+}
|
|
|
+const data = reactive<PageData<ConfigForm, ConfigQuery>>({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ configName: '',
|
|
|
+ configKey: '',
|
|
|
+ configType: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
|
|
|
+ configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
|
|
|
+ configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const { queryParams, form, rules } = toRefs(data)
|
|
|
+
|
|
|
+/** 查询参数列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value))
|
|
|
+ configList.value = res.rows
|
|
|
+ total.value = res.total
|
|
|
+ loading.value = false
|
|
|
+}
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ reset()
|
|
|
+ dialog.visible = false
|
|
|
+}
|
|
|
+/** 表单重置 */
|
|
|
+const reset = () => {
|
|
|
+ form.value = { ...initFormData }
|
|
|
+ configFormRef.value?.resetFields()
|
|
|
+}
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.pageNum = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ dateRange.value = ['', '']
|
|
|
+ queryFormRef.value?.resetFields()
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
+/** 多选框选中数据 */
|
|
|
+const handleSelectionChange = (selection: ConfigVO[]) => {
|
|
|
+ ids.value = selection.map((item) => item.configId)
|
|
|
+ single.value = selection.length != 1
|
|
|
+ multiple.value = !selection.length
|
|
|
+}
|
|
|
+/** 新增按钮操作 */
|
|
|
+const handleAdd = () => {
|
|
|
+ reset()
|
|
|
+ dialog.visible = true
|
|
|
+ dialog.title = '添加参数'
|
|
|
+}
|
|
|
+/** 修改按钮操作 */
|
|
|
+const handleUpdate = async (row?: ConfigVO) => {
|
|
|
+ reset()
|
|
|
+ const configId = row?.configId || ids.value[0]
|
|
|
+ const res = await getConfig(configId)
|
|
|
+ Object.assign(form.value, res.data)
|
|
|
+ dialog.visible = true
|
|
|
+ dialog.title = '修改参数'
|
|
|
+}
|
|
|
+/** 提交按钮 */
|
|
|
+const submitForm = () => {
|
|
|
+ configFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ form.value.configId ? await updateConfig(form.value) : await addConfig(form.value)
|
|
|
+ proxy?.$modal.msgSuccess('操作成功')
|
|
|
+ dialog.visible = false
|
|
|
+ await getList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+/** 删除按钮操作 */
|
|
|
+const handleDelete = async (row?: ConfigVO) => {
|
|
|
+ const configIds = row?.configId || ids.value
|
|
|
+ await proxy?.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项?')
|
|
|
+ await delConfig(configIds)
|
|
|
+ await getList()
|
|
|
+ proxy?.$modal.msgSuccess('删除成功')
|
|
|
+}
|
|
|
+/** 导出按钮操作 */
|
|
|
+const handleExport = () => {
|
|
|
+ proxy?.download(
|
|
|
+ 'system/config/export',
|
|
|
+ {
|
|
|
+ ...queryParams.value
|
|
|
+ },
|
|
|
+ `config_${new Date().getTime()}.xlsx`
|
|
|
+ )
|
|
|
+}
|
|
|
+/** 刷新缓存按钮操作 */
|
|
|
+const handleRefreshCache = async () => {
|
|
|
+ await refreshCache()
|
|
|
+ proxy?.$modal.msgSuccess('刷新缓存成功')
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.system-page {
|
|
|
+ padding: 0px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ min-height: calc(100vh - 10px);
|
|
|
+
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-textarea__inner) {
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-card {
|
|
|
+ border-radius: 1px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ :deep(.el-card__header) {
|
|
|
+ padding: 15px 20px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-right {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background-color: #f8faff;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 0px solid #e6ebf5;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ :deep(.el-form) {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-right: 15px;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagination {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table) {
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: auto;
|
|
|
+ height: calc(100vh - 195px);
|
|
|
+
|
|
|
+ th.el-table__cell {
|
|
|
+ background-color: #f5f7fa !important;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary.is-link {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--danger.is-link {
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|