|
|
@@ -0,0 +1,97 @@
|
|
|
+<template>
|
|
|
+ <el-container class="is-vertical">
|
|
|
+ <sc-page-header></sc-page-header>
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <el-card>
|
|
|
+ <el-form ref="formRef" :model="form" label-width="auto">
|
|
|
+ <el-form-item v-for="(item, key) in form" :key="key" :label="key" :prop="key" :rules="{ validator: validateConfig }">
|
|
|
+ <el-input-number v-if="key.endsWith('Time')" v-model="form[key].v" :min="60" :controls="false" :readonly="!item.isUpdate">
|
|
|
+ <template #suffix>秒</template>
|
|
|
+ </el-input-number>
|
|
|
+ <el-input v-else v-model="form[key].v" :readonly="!item.isUpdate"></el-input>
|
|
|
+
|
|
|
+ <template v-if="!key.startsWith('oss.')">
|
|
|
+ <template v-if="item.isUpdate">
|
|
|
+ <el-button :loading="isSaving" type="primary" link @click="submit(item, key)">保存</el-button>
|
|
|
+ <el-button link @click="resetItem(item, key)">取消</el-button>
|
|
|
+ </template>
|
|
|
+ <el-button v-else type="primary" link @click="edit(item, key)">修改</el-button>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+import API from "@/api";
|
|
|
+import { defaultConfig } from "./main";
|
|
|
+
|
|
|
+const configures = ref({});
|
|
|
+const form = ref({});
|
|
|
+
|
|
|
+const isSaving = ref(false);
|
|
|
+
|
|
|
+const validateConfig = ({ field }, _, callback) => {
|
|
|
+ if (!XEUtils.get(form.value, field).v) return callback(new Error(`请输入${field}`));
|
|
|
+ callback()
|
|
|
+}
|
|
|
+
|
|
|
+const getConfig = () => {
|
|
|
+ API.system.configure.get().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ configures.value = XEUtils.clone(XEUtils.get(res, "expands._configures"), true);
|
|
|
+ form.value = XEUtils.clone(XEUtils.get(res, "expands._configures"), true);
|
|
|
+ } else throw res.message;
|
|
|
+ }).catch(() => {
|
|
|
+ configures.value = {};
|
|
|
+ form.value = {};
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const resetItem = (item, keyName) => {
|
|
|
+ XEUtils.set(item, "isUpdate", false);
|
|
|
+ XEUtils.set(item, "v", XEUtils.get(configures.value, keyName).v);
|
|
|
+ formRef.value.validateField(keyName);
|
|
|
+}
|
|
|
+
|
|
|
+const formRef = ref();
|
|
|
+const edit = (item, keyName) => {
|
|
|
+ XEUtils.set(item, "isUpdate", true);
|
|
|
+
|
|
|
+ XEUtils.objectEach(XEUtils.omit(form.value, keyName), (ele, key) => {
|
|
|
+ if (XEUtils.has(ele, "isUpdate")) resetItem(ele, key);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const submit = (item, keyName) => {
|
|
|
+ formRef.value.validateField(keyName, valid => {
|
|
|
+ if (valid) {
|
|
|
+ isSaving.value = true;
|
|
|
+ API.system.configure.edit({ keyName, v: item.v }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ isSaving.value = false;
|
|
|
+ ElMessage.success("操作成功");
|
|
|
+ API.system.configure.reload();
|
|
|
+ XEUtils.set(item, "isUpdate", false);
|
|
|
+ } else throw res.message;
|
|
|
+ }).catch(() => isSaving.value = false);
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+getConfig();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.el-card :deep(.el-card__body) {padding-top: calc(var(--el-card-padding) + 18px);}
|
|
|
+
|
|
|
+.el-button {margin-left: 12px;}
|
|
|
+.el-input, .el-input-number {flex: 1;width: unset;}
|
|
|
+.el-input-number :deep(.el-input__inner) {text-align: unset;}
|
|
|
+</style>
|