140 lines
4.4 KiB
Vue
140 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-form inline :model="search" @submit.prevent>
|
|
<el-form-item label="配置项">
|
|
<el-input placeholder="名称/描述" v-model="search.name" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="btn-container">
|
|
<el-button type="primary" @click="add">添加</el-button>
|
|
<div class="search-btn">
|
|
<el-button type="primary" @click="loadData" icon="Search">搜索</el-button>
|
|
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<el-table :data="systemConfigData" v-loading="loading" stripe>
|
|
<el-table-column type="expand">
|
|
<template #default="scope">
|
|
<pre style="margin:0 10px;">{{ JSON.stringify(scope.row.value, null, ' ') }}</pre>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="配置项名称" />
|
|
<el-table-column prop="description" label="配置项描述" />
|
|
<el-table-column prop="is_public" label="是否公开" >
|
|
<template #default="scope">
|
|
{{ scope.row.is_public ? '是' : '否' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_at" label="创建时间" >
|
|
<template #default="scope">
|
|
{{ datetimeFormat(scope.row.created_at) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="updated_at" label="更新时间" >
|
|
<template #default="scope">
|
|
{{ datetimeFormat(scope.row.updated_at) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" >
|
|
<template #default="scope">
|
|
<el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
|
|
<el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-dialog v-model="addModal" :title="modalTitle" >
|
|
<system-config-add ref="addForm" :formData="formData" />
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="addModal = false">取消</el-button>
|
|
<el-button type="primary" @click="save" :loading="modalLoading">确定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import moment from 'moment'
|
|
import http from '@/utils/http'
|
|
import SystemConfigAdd from './SystemConfigAdd.vue'
|
|
import { SystemConfigModel } from '@/model/system/system-config'
|
|
|
|
const modalLoading = ref(false)
|
|
const loading = ref(false)
|
|
const search = ref<{name?: string}>({})
|
|
const systemConfigData = ref<SystemConfigModel[]>([])
|
|
const addModal = ref(false)
|
|
const modalTitle = ref('')
|
|
const formData = ref<SystemConfigModel>({
|
|
name: '',
|
|
value: '',
|
|
description: '',
|
|
is_public: false
|
|
})
|
|
|
|
const addForm = ref<InstanceType<typeof SystemConfigAdd>>()
|
|
|
|
function reset() {
|
|
search.value = {}
|
|
loadData()
|
|
}
|
|
|
|
async function loadData() {
|
|
loading.value = true
|
|
systemConfigData.value = await http.get('/api/v2/system/config/list', {params: search.value})
|
|
loading.value = false
|
|
}
|
|
|
|
function add() {
|
|
formData.value = {
|
|
name: '',
|
|
value: '',
|
|
description: '',
|
|
is_public: false
|
|
}
|
|
modalTitle.value = '新增配置项'
|
|
addModal.value = true
|
|
}
|
|
|
|
function update(row: SystemConfigModel) {
|
|
const data = Object.assign({}, row)
|
|
data.value = JSON.stringify(data.value, null, ' ')
|
|
formData.value = data
|
|
modalTitle.value = '修改配置项'
|
|
addModal.value = true
|
|
}
|
|
|
|
async function save() {
|
|
addForm.value?.configForm?.validate(async (valid: boolean) => {
|
|
if (!valid) return
|
|
modalLoading.value = true
|
|
const data = await http.post<SystemConfigModel, any>('/api/v2/system/config/save', formData.value)
|
|
modalLoading.value = false
|
|
addModal.value = false
|
|
ElMessage.success(data.message)
|
|
loadData()
|
|
})
|
|
}
|
|
|
|
function remove(row: SystemConfigModel) {
|
|
ElMessageBox.confirm(`是否确认删除 ${row.name} 配置项？`, '确认删除', {type: 'warning'}).then(async () => {
|
|
const data = await http.delete<{params: {id: string}}, any>('/api/v2/system/config/delete', {params: {id: row._id}})
|
|
if(data.status) {
|
|
ElMessage.success(data.message)
|
|
loadData()
|
|
} else {
|
|
ElMessage.warning(data.message)
|
|
}
|
|
}).catch(() => {})
|
|
}
|
|
|
|
function datetimeFormat(dateStr: string) {
|
|
return dateStr ? moment(dateStr).format('YYYY-MM-DD HH:mm:ss') : null
|
|
}
|
|
|
|
loadData()
|
|
</script> |