- <template>
- <div class="publicContainer">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="参数名称" prop="configName">
- <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="参数键名" prop="configKey">
- <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable style="width: 240px" @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"
- type="daterange"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- ></el-date-picker>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
-
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']"
- >修改</el-button
- >
- </el-col>
- <el-col :span="1.5">
- <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']"
- >删除</el-button
- >
- </el-col>
- <el-col :span="1.5">
- <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']">导出</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
-
- <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" />
- <el-table-column label="参数主键" prop="configId" />
- <el-table-column label="模块编号" prop="moduleKey"></el-table-column>
- <el-table-column label="参数名称" prop="configName" show-overflow-tooltip />
- <el-table-column label="参数键名" prop="configKey" show-overflow-tooltip />
- <el-table-column label="参数键值" prop="configValue" show-overflow-tooltip />
- <el-table-column label="系统内置" prop="configType">
- <template #default="scope">
- <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
- </template>
- </el-table-column>
- <el-table-column label="备注" prop="remark" show-overflow-tooltip />
- <el-table-column label="创建时间" prop="createTime" width="180">
- <template #default="scope">
- <span>{{ parseTime(scope.row.createTime) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="150" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button>
- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']"
- >删除</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 添加或修改参数配置对话框 -->
- <el-dialog :title="title" v-model="open" width="500px" append-to-body>
- <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="模块编号" prop="moduleKey">
- <el-select v-model="form.moduleKey" placeholder="请选择模块编号" clearable style="width: 240px">
- <el-option v-for="dict in sysModuleList" :key="dict.moduleKey" :label="dict.moduleName" :value="dict.moduleKey" />
- </el-select>
- </el-form-item>
- <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" 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" :label="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>
- <div class="dialog-footer">
- <el-button type="info" @click="cancel">取 消</el-button>
- <el-button type="primary" @click="submitForm">确 定</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="Config">
- import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
- import { listsysModule } from '@/api/system/sysModule';
- const { proxy } = getCurrentInstance();
- const { sys_yes_no } = proxy.useDict('sys_yes_no');
-
- const configList = ref([]);
- const open = ref(false);
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref('');
- const dateRange = ref([]);
- const sysModuleList = ref([]); //系统模块列表
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- configName: undefined,
- configKey: undefined,
- configType: undefined,
- },
- rules: {
- moduleKey: [{ required: true, message: '模块编号不能为空', trigger: 'change' }],
- configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
- configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
- configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
- },
- });
-
- const { queryParams, form, rules } = toRefs(data);
-
- // 查询模块编号列表
- function getListsysModule() {
- listsysModule().then(res => {
- sysModuleList.value = res.data;
- });
- }
-
- /** 查询参数列表 */
- function getList() {
- loading.value = true;
- // queryParams.value.moduleKey = "system";
- listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
- configList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
- /** 取消按钮 */
- function cancel() {
- open.value = false;
- reset();
- }
- /** 表单重置 */
- function reset() {
- form.value = {
- configId: undefined,
- configName: undefined,
- configKey: undefined,
- configValue: undefined,
- configType: 'Y',
- remark: undefined,
- };
- proxy.resetForm('configRef');
- }
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
- }
- /** 重置按钮操作 */
- function resetQuery() {
- dateRange.value = [];
- proxy.resetForm('queryRef');
- handleQuery();
- }
- /** 多选框选中数据 */
- function handleSelectionChange(selection) {
- ids.value = selection.map(item => item.configId);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- }
- /** 新增按钮操作 */
- function handleAdd() {
- reset();
- open.value = true;
- title.value = '添加参数';
- }
- /** 修改按钮操作 */
- function handleUpdate(row) {
- reset();
- const configId = row.configId || ids.value;
- getConfig(configId).then(response => {
- form.value = response.data;
- open.value = true;
- title.value = '修改参数';
- });
- }
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['configRef'].validate(valid => {
- if (valid) {
- if (form.value.configId != undefined) {
- updateConfig(form.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- open.value = false;
- getList();
- });
- } else {
- addConfig(form.value).then(response => {
- proxy.$modal.msgSuccess('新增成功');
- open.value = false;
- getList();
- });
- }
- }
- });
- }
- /** 删除按钮操作 */
- function handleDelete(row) {
- const configIds = row.configId || ids.value;
- proxy.$modal
- .confirm('是否确认删除参数编号为"' + configIds + '"的数据项?')
- .then(function () {
- return delConfig(configIds);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
- /** 导出按钮操作 */
- function handleExport() {
- proxy.download(
- 'system/config/export',
- {
- ...queryParams.value,
- },
- `config_${new Date().getTime()}.xlsx`
- );
- }
- /** 刷新缓存按钮操作 */
- function handleRefreshCache() {
- refreshCache().then(() => {
- proxy.$modal.msgSuccess('刷新缓存成功');
- });
- }
-
- getList();
- getListsysModule();
- </script>