首选项配置以及优化

src/page/login/index.vue

@@ -3,9 +3,7 @@
     class="login-container"
     :style="{
       'background-image': `url(${
-        configOptions.backgroundUrl
-          ? JSON.parse(configOptions.backgroundUrl)[0].url
-          : getImageUrl('bg.png')
+        configOptions.backgroundUrl ? JSON.parse(configOptions.backgroundUrl)[0].url : getImageUrl('bg.png')
       })`,
     }">
     <el-alert v-if="showValidityDays" class="bg-warning" :title="validityTips" type="warning" />
@@ -15,11 +13,7 @@
         </div> -->
 
       <div class="bg-content">
-        <bg-tabs
-          class="login-tab"
-          v-model="loginTab"
-          style="width: 480px"
-          v-if="pageType === 'login'">
+        <bg-tabs class="login-tab" v-model="loginTab" style="width: 480px" v-if="pageType === 'login'">
           <bg-tab label="账号密码登录" name="account">
             <LoginByAccount @register="switchPageType('account')" @password="password" />
           </bg-tab>
@@ -33,9 +27,7 @@
     <div class="bg-msg">
       <p v-if="configOptions && configOptions.patent">{{ configOptions.patent }}</p>
       <p v-if="configOptions">
-        <span class="can_click_text" @click="open(configOptions.icpUrl)">
-          {{ configOptions.icpFiling }} |
-        </span>
+        <span class="can_click_text" @click="open(configOptions.icpUrl)"> {{ configOptions.icpFiling }} | </span>
         <span class="can_click_text" @click="open(configOptions.publicSecurityUrl)">
           {{ configOptions.publicSecurityFiling }}
         </span>
@@ -104,7 +96,7 @@ const getLoginPageConfig = () => {
 };
 //获取首选项配置
 const getSysOptions = () => {
-  axios.get(`/apaas/system/v5/sysOptions`).then((res) => {
+  axios.get(`/v1/api/sysOptions`).then((res) => {
     if (res.data.code == 200) {
       const result = res.data.data || {};
       if (result.license_dead_date && result.license_inform_day) {

src/page/main/system-admin/preference/authorityForm.vue

@@ -41,13 +41,15 @@ import { reactive, toRefs, ref } from "vue";
 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 
-const props = defineProps({
+const state = reactive({
   authorizeFormData: {
-    type: Object,
-    default: () => ({}),
+    id: "",
+    system_version: "",
+    system_user: "",
+    license: "",
+    license_dead_date: "",
+    license_inform_day: "",
   },
-});
-const state = reactive({
   authorizeRules: {
     license_inform_day: [{ type: "number", min: 0, max: 90, message: "请输入0~90的整数", trigger: "blur" }],
   },
@@ -57,7 +59,7 @@ const authorizeFormRef = ref(null);
 const getLicenseInfo = () => {
   if (!state.authorizeFormData.license) return;
   axios
-    .post("/apaas/system/v5/sysOptions/getLicenseInfo", {
+    .post("/v1/api/sysOptions/getLicenseInfo", {
       license: state.authorizeFormData.license,
     })
     .then((res) => {
@@ -70,14 +72,20 @@ const getLicenseInfo = () => {
       }
     });
 };
+//设置表单数据
+const setFormData = (data) => {
+  Object.keys(state.authorizeFormData).forEach((item) => {
+    state.authorizeFormData[item] = data[item];
+  });
+};
 //保存
 const save = () => {
   authorizeFormRef.value.validate((valid) => {
     if (valid) {
-      params = {
-        ...props.authorizeFormData,
+      let params = {
+        ...state.authorizeFormData,
       };
-      axios.post("/apaas/system/v5/sysOptions/licenseOpts", params).then((res) => {
+      axios.post("/v1/api/sysOptions/licenseOpts", params).then((res) => {
         if (res.data.code == 200) {
           ElMessage.success(res.data.msg);
         } else {
@@ -87,8 +95,9 @@ const save = () => {
     }
   });
 };
-const { authorizeRules } = toRefs(state);
+const { authorizeFormData, authorizeRules } = toRefs(state);
 defineExpose({
+  setFormData,
   save,
 });
 </script>

src/page/main/system-admin/preference/index.vue

@@ -20,19 +20,13 @@
       </div>
       <div class="right_container bgc_white">
         <!-- license授权表单 -->
-        <authorityForm
-          ref="authorityFormRef"
-          v-if="activeIndex == 1"
-          :authorizeFormData="authorizeFormData"></authorityForm>
+        <authorityForm ref="authorityFormRef" v-if="activeIndex == 1"></authorityForm>
 
-        <loginPageForm
-          ref="loginPageFormRef"
-          v-if="activeIndex == 2"
-          :loginPageFormData="loginPageFormData"></loginPageForm>
+        <loginPageForm ref="loginPageFormRef" v-if="activeIndex == 2"></loginPageForm>
         <!-- 安全相关表单 -->
-        <secureForm ref="secureFormRef" v-if="activeIndex == 3" :secureFormData="secureFormData"></secureForm>
+        <secureForm ref="secureFormRef" v-if="activeIndex == 3"></secureForm>
         <!-- 登录注册配置表单 -->
-        <registerForm ref="registerFormRef" v-if="activeIndex == 4" :registerFormData="registerFormData"></registerForm>
+        <registerForm ref="registerFormRef" v-if="activeIndex == 4"></registerForm>
         <div class="operate_btns">
           <el-button type="primary" @click="save"> 保存 </el-button>
         </div>
@@ -51,7 +45,7 @@
 </template>
 
 <script setup>
-import { reactive, toRefs, onBeforeMount, ref } from "vue";
+import { reactive, toRefs, onBeforeMount, ref, nextTick } from "vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import { ElMessage } from "element-plus";
 import authorityForm from "./authorityForm.vue";
@@ -65,73 +59,45 @@ const loginPageFormRef = ref(null);
 const secureFormRef = ref(null);
 const registerFormRef = ref(null);
 const state = reactive({
-  //授权信息表单
-  authorizeFormData: {
-    id: "",
-    system_version: "",
-    system_user: "",
-    license: "",
-    license_dead_date: "",
-    license_inform_day: "",
-  },
-  //登录页表单
-  loginPageFormData: {
-    logoUrl: [],
-    backgroundUrl: [],
-    patent: "",
-    icpFiling: "",
-    icpUrl: "",
-    publicSecurityFiling: "",
-    publicSecurityUrl: "",
-    legalStatementUrl: "",
-    privacyPolicyUrl: "",
-  },
-  //安全相关信息表单
-  secureFormData: {
-    id: "",
-    min_pwd_level: "",
-    force_update_state: 0,
-    pwd_validity: "",
-    session_validity: "",
-    access_rule_state: "",
-  },
-
-  //登录注册配置表单
-  registerFormData: {
-    id: "",
-    login_config_state: 0,
-    login_limit_time: "",
-    login_pwd_error: "",
-    login_lock_time: "",
-    register_config_state: 0,
-  },
   //选中项索引
   activeIndex: 1,
   restoreDialog: false,
+  //首选项配置数据
+  sysOptions: {},
 });
-const { authorizeFormData, loginPageFormData, secureFormData, registerFormData, activeIndex, restoreDialog } =
-  toRefs(state);
+const { activeIndex, restoreDialog } = toRefs(state);
 onBeforeMount(() => {
   getPreferenceConfig();
 });
 //切换菜单选项
 const switchMenu = (index) => {
   state.activeIndex = index;
+  nextTick(() => {
+    switch (index) {
+      case "1":
+        authorityFormRef.value.setFormData(state.sysOptions);
+        break;
+      case "2":
+        loginPageFormRef.value.setFormData(state.sysOptions);
+        break;
+      case "3":
+        secureFormRef.value.setFormData(state.sysOptions);
+        break;
+      case "4":
+        registerFormRef.value.setFormData(state.sysOptions);
+        break;
+      default:
+        break;
+    }
+  });
 };
 //获取首选项配置
 const getPreferenceConfig = () => {
-  axios.get("/apaas/system/v5/sysOptions").then((res) => {
+  axios.get("/v1/api/sysOptions").then((res) => {
     if (res.data.code == 200) {
       let data = res.data.data;
-      Object.keys(state.authorizeFormData).forEach((item) => {
-        state.authorizeFormData[item] = data[item];
-      });
-      Object.keys(state.secureFormData).forEach((item) => {
-        state.secureFormData[item] = data[item];
-      });
-      Object.keys(state.registerFormData).forEach((item) => {
-        state.registerFormData[item] = data[item];
-      });
+      state.sysOptions = data;
+      authorityFormRef.value.setFormData(data);
     } else {
       ElMessage.error(res.data.data);
     }
@@ -141,16 +107,16 @@ const getPreferenceConfig = () => {
 //保存表单项
 const save = () => {
   switch (state.activeIndex) {
-    case 1:
+    case "1":
       authorityFormRef.value.save();
       break;
-    case 2:
+    case "2":
       loginPageFormRef.value.save();
       break;
-    case 3:
+    case "3":
       secureFormRef.value.save();
       break;
-    case 4:
+    case "4":
       registerFormRef.value.save();
       break;
     default:

src/page/main/system-admin/preference/loginPageForm.vue

@@ -6,9 +6,9 @@
       :rules="loginPageRules"
       label-width="96px"
       class="registerForm">
-      <el-form-item label="LOGO" prop="logoUrl">
+      <el-form-item label="LOGO" prop="logo">
         <bg-upload-image
-          v-model="loginPageFormData.logoUrl"
+          v-model="loginPageFormData.logo"
           :showTips="true"
           customTips="请选择图片上传：支持jpg、png等格式，图片需小于500KB"
           :fileSize="500"
@@ -18,9 +18,9 @@
           @change="changeLogo"
           :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
       </el-form-item>
-      <el-form-item label="登录背景图" prop="backgroundUrl">
+      <el-form-item label="登录背景图" prop="bg_image">
         <bg-upload-image
-          v-model="loginPageFormData.backgroundUrl"
+          v-model="loginPageFormData.bg_image"
           :fileSize="2"
           :showTips="true"
           customTips="请选择图片上传：大小1920 * 1026像素支持jpg、png等格式，图片需小于2MB"
@@ -30,41 +30,37 @@
           :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
       </el-form-item>
       <bg-form-gap title="底部所有权内容"></bg-form-gap>
-      <el-form-item label="内容" prop="patent">
+      <el-form-item label="内容" prop="bottom_title">
         <el-input
-          v-model.trim="loginPageFormData.patent"
+          v-model.trim="loginPageFormData.bottom_title"
           placeholder="例如：Copyright © 某某大数据, All Rights Reserved."></el-input>
       </el-form-item>
 
       <bg-form-gap title="底部ICP备案"></bg-form-gap>
-      <el-form-item label="内容" prop="icpFiling">
-        <el-input placeholder="请输入" v-model.trim="loginPageFormData.icpFiling"></el-input>
+      <el-form-item label="内容" prop="icp">
+        <el-input placeholder="请输入" v-model.trim="loginPageFormData.icp"></el-input>
       </el-form-item>
-      <el-form-item label="跳转连接" prop="icpUrl">
-        <el-input placeholder="例如：https://...或http://..." v-model.trim="loginPageFormData.icpUrl"></el-input>
+      <el-form-item label="跳转连接" prop="icp_url">
+        <el-input placeholder="例如：https://...或http://..." v-model.trim="loginPageFormData.icp_url"></el-input>
       </el-form-item>
       <bg-form-gap title="底部公安网备案"></bg-form-gap>
-      <el-form-item label="内容" prop="publicSecurityFiling">
-        <el-input placeholder="请输入" v-model.trim="loginPageFormData.publicSecurityFiling"></el-input>
+      <el-form-item label="内容" prop="police">
+        <el-input placeholder="请输入" v-model.trim="loginPageFormData.police"></el-input>
       </el-form-item>
-      <el-form-item label="跳转连接" prop="publicSecurityUrl">
-        <el-input
-          placeholder="例如：https://...或http://..."
-          v-model.trim="loginPageFormData.publicSecurityUrl"></el-input>
+      <el-form-item label="跳转连接" prop="police_url">
+        <el-input placeholder="例如：https://...或http://..." v-model.trim="loginPageFormData.police_url"></el-input>
       </el-form-item>
 
       <bg-form-gap title="法律声明"></bg-form-gap>
-      <el-form-item label="跳转连接" prop="legalStatementUrl">
-        <el-input
-          placeholder="例如：https://...或http://..."
-          v-model.trim="loginPageFormData.legalStatementUrl"></el-input>
+      <el-form-item label="跳转连接" prop="legal_notice">
+        <el-input placeholder="例如：https://...或http://..." v-model.trim="loginPageFormData.legal_notice"></el-input>
       </el-form-item>
 
       <bg-form-gap title="隐私政策"></bg-form-gap>
-      <el-form-item label="跳转连接" prop="privacyPolicyUrl">
+      <el-form-item label="跳转连接" prop="privacy_policy">
         <el-input
           placeholder="例如：https://...或http://..."
-          v-model.trim="loginPageFormData.privacyPolicyUrl"></el-input>
+          v-model.trim="loginPageFormData.privacy_policy"></el-input>
       </el-form-item>
     </el-form>
   </div>
@@ -76,41 +72,59 @@ import { ElMessage } from "element-plus";
 import { validateLink } from "@/services/rules.js";
 import axios from "@/request/http.js";
 
-const props = defineProps({
-  loginPageFormData: {
-    type: Object,
-    default: () => ({}),
-  },
-});
 const loginPageRef = ref(null);
 const state = reactive({
+  loginPageFormData: {
+    id: "",
+    logo: [],
+    bg_image: [],
+    bottom_title: "",
+    icp: "",
+    icp_url: "",
+    police: "",
+    police_url: "",
+    legal_notice: "",
+    privacy_policy: "",
+  },
   loginPageRules: {
-    logoUrl: [{ required: true, message: "请上传Logo", trigger: "change" }],
-    backgroundUrl: [{ required: true, message: "请上传背景图", trigger: "change" }],
-    icpUrl: [{ validator: validateLink, trigger: "blur" }],
-    publicSecurityUrl: [{ validator: validateLink, trigger: "blur" }],
-    legalStatementUrl: [{ validator: validateLink, trigger: "blur" }],
-    privacyPolicyUrl: [{ validator: validateLink, trigger: "blur" }],
+    logo: [{ required: true, message: "请上传Logo", trigger: "change" }],
+    bg_image: [{ required: true, message: "请上传背景图", trigger: "change" }],
+    icp_url: [{ validator: validateLink, trigger: "blur" }],
+    police_url: [{ validator: validateLink, trigger: "blur" }],
+    legal_notice: [{ validator: validateLink, trigger: "blur" }],
+    privacy_policy: [{ validator: validateLink, trigger: "blur" }],
   },
 });
 const changeLogo = (value) => {
   if (value && value.length > 0) {
-    loginPageRef.value.clearValidate("logoUrl");
+    loginPageRef.value.clearValidate("logo");
   }
 };
 const changeBanner = (value) => {
   if (value && value.length > 0) {
-    refForm.value.clearValidate("backgroundUrl");
+    loginPageRef.value.clearValidate("bg_image");
   }
 };
+//设置表单数据
+const setFormData = (data) => {
+  Object.keys(state.loginPageFormData).forEach((item) => {
+    if (["bg_image", "logo"].includes(item)) {
+      state.loginPageFormData[item] = data[item] ? JSON.parse(data[item]) : [];
+      return;
+    }
+    state.loginPageFormData[item] = data[item];
+  });
+};
 //保存
 const save = () => {
   loginPageRef.value.validate((valid) => {
     if (valid) {
-      params = {
-        ...props.loginPageFormData,
+      let params = {
+        ...state.loginPageFormData,
       };
-      axios.post("/apaas/system/v5/sysOptions/licenseOpts", params).then((res) => {
+      params.logo = JSON.stringify(params.logo);
+      params.bg_image = JSON.stringify(params.bg_image);
+      axios.post("/v1/api/sysOptions/loginPageOpts", params).then((res) => {
         if (res.data.code == 200) {
           ElMessage.success(res.data.msg);
         } else {
@@ -120,8 +134,9 @@ const save = () => {
     }
   });
 };
-const { loginPageRules } = toRefs(state);
+const { loginPageFormData, loginPageRules } = toRefs(state);
 defineExpose({
+  setFormData,
   save,
 });
 </script>

src/page/main/system-admin/preference/registerForm.vue

 <template>
-  <el-form
-    ref="registerFormRef"
-    :model="registerFormData"
-    :rules="registerRules"
-    label-width="125px"
-    class="registerForm">
-    <bg-form-gap title="登录受限配置"></bg-form-gap>
-    <el-form-item label="登录受限是否启用" prop="login_config_state">
-      <bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="registerFormData.login_config_state"></bg-switch>
-    </el-form-item>
-    <div class="input_password_config" v-if="registerFormData.login_config_state == 1">
-      <span>在</span>
-      <el-form-item prop="login_limit_time" label-width="0">
-        <el-input
-          placeholder="请输入小时数"
-          v-model.trim.number="registerFormData.login_limit_time"
-          maxlength="3"></el-input>
+  <div>
+    <el-form
+      ref="registerFormRef"
+      :model="registerFormData"
+      :rules="registerRules"
+      label-width="125px"
+      class="registerForm">
+      <bg-form-gap title="登录受限配置"></bg-form-gap>
+      <el-form-item label="登录受限是否启用" prop="login_config_state">
+        <bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="registerFormData.login_config_state"></bg-switch>
       </el-form-item>
-      <span>小时内</span>
-      <el-form-item prop="login_pwd_error" label-width="0">
-        <el-input
-          placeholder="请输入密码输错次数"
-          v-model.trim.number="registerFormData.login_pwd_error"
-          maxlength="3"></el-input>
-      </el-form-item>
-      <span>次输错密码，自动锁定</span>
-      <el-form-item prop="login_lock_time" label-width="0">
-        <el-input
-          placeholder="请输入分钟数"
-          v-model.trim.number="registerFormData.login_lock_time"
-          maxlength="3"></el-input>
-      </el-form-item>
-      <span>分钟</span>
-      <el-button type="primary" @click="restoreDialog = true">一键还原受限</el-button>
-      <el-tooltip placement="top-start" effect="light">
-        <template #content>
-          <span>必须为大于0的正整数且不能为空</span>
-          <br />
-          <span>一键还原按钮将所有锁定的账号解锁并将输错次数还原</span>
-        </template>
-        <div class="tip-image"></div>
-      </el-tooltip>
-    </div>
-    <bg-form-gap title="注册配置"></bg-form-gap>
-    <el-form-item label="允许注册" prop="register_config_state">
-      <el-radio-group v-model="registerFormData.register_config_state">
-        <el-radio :label="1">是</el-radio>
-        <el-radio :label="0">否</el-radio>
-      </el-radio-group>
-    </el-form-item>
-  </el-form>
+      <div class="input_password_config" v-if="registerFormData.login_config_state == 1">
+        <span>在</span>
+        <el-form-item prop="login_limit_time" label-width="0">
+          <el-input
+            placeholder="请输入小时数"
+            v-model.trim.number="registerFormData.login_limit_time"
+            maxlength="3"></el-input>
+        </el-form-item>
+        <span>小时内</span>
+        <el-form-item prop="login_pwd_error" label-width="0">
+          <el-input
+            placeholder="请输入密码输错次数"
+            v-model.trim.number="registerFormData.login_pwd_error"
+            maxlength="3"></el-input>
+        </el-form-item>
+        <span>次输错密码，自动锁定</span>
+        <el-form-item prop="login_lock_time" label-width="0">
+          <el-input
+            placeholder="请输入分钟数"
+            v-model.trim.number="registerFormData.login_lock_time"
+            maxlength="3"></el-input>
+        </el-form-item>
+        <span>分钟</span>
+        <el-button type="primary" @click="restoreDialog = true">一键还原受限</el-button>
+        <el-tooltip placement="top-start" effect="light">
+          <template #content>
+            <span>必须为大于0的正整数且不能为空</span>
+            <br />
+            <span>一键还原按钮将所有锁定的账号解锁并将输错次数还原</span>
+          </template>
+          <div class="tip-image"></div>
+        </el-tooltip>
+      </div>
+    </el-form>
+    <el-dialog class="dialog_box" title="提示" v-model="restoreDialog" width="420px">
+      <div>该操作将还原所有锁定账号和输错次数，是否继续？</div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="restoreDialog = false">取 消</el-button>
+          <el-button type="primary" @click="confirm">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -58,14 +62,15 @@ import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 
 const registerFormRef = ref(null);
-const props = defineProps({
-  registerFormData: {
-    type: Object,
-    default: () => ({}),
-  },
-});
 
 const state = reactive({
+  registerFormData: {
+    id: "",
+    login_config_state: 0,
+    login_limit_time: "",
+    login_pwd_error: "",
+    login_lock_time: "",
+  },
   registerRules: {
     login_limit_time: [
       {
@@ -92,20 +97,39 @@ const state = reactive({
       },
     ],
   },
+  //一键还原受限弹框
+  restoreDialog: false,
 });
+//设置表单数据
+const setFormData = (data) => {
+  Object.keys(state.registerFormData).forEach((item) => {
+    state.registerFormData[item] = data[item];
+  });
+};
+//一键还原受限确定
+const confirm = () => {
+  axios.post(`/v1/api/sysOptions/reStartConfig`).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(res.data.msg);
+      state.restoreDialog = false;
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
 //保存
 const save = () => {
   registerFormRef.value.validate((valid) => {
     if (valid) {
-      params = {
-        ...props.registerFormData,
+      let params = {
+        ...state.registerFormData,
       };
       if (params.login_config_state == 0) {
         params.login_limit_time = 0;
         params.login_pwd_error = 0;
         params.login_lock_time = 0;
       }
-      axios.post("/apaas/system/v5/sysOptions/loginOpts", params).then((res) => {
+      axios.post("/v1/api/sysOptions/loginOpts", params).then((res) => {
         if (res.data.code == 200) {
           ElMessage.success(res.data.msg);
         } else {
@@ -115,8 +139,9 @@ const save = () => {
     }
   });
 };
-const { registerRules } = toRefs(state);
+const { registerFormData, registerRules, restoreDialog } = toRefs(state);
 defineExpose({
+  setFormData,
   save,
 });
 </script>

src/page/main/system-admin/preference/secureForm.vue

@@ -79,15 +79,17 @@ import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 
 const secureFormRef = ref(null);
-const props = defineProps({
-  secureFormData: {
-    type: Object,
-    default: () => ({}),
-  },
-});
 
 const session_validity_max = window.defaultConfig.session_validity_max;
 const state = reactive({
+  secureFormData: {
+    id: "",
+    min_pwd_level: "",
+    force_update_state: 0,
+    pwd_validity: "",
+    session_validity: "",
+    access_rule_state: "",
+  },
   //安全相关表单校验规则
   secureRules: {
     pwd_validity: [
@@ -108,14 +110,20 @@ const state = reactive({
     ],
   },
 });
+//设置表单数据
+const setFormData = (data) => {
+  Object.keys(state.secureFormData).forEach((item) => {
+    state.secureFormData[item] = data[item];
+  });
+};
 //保存
 const save = () => {
   secureFormRef.value.validate((valid) => {
     if (valid) {
-      params = {
-        ...props.secureFormData,
+      let params = {
+        ...state.secureFormData,
       };
-      axios.post("/apaas/system/v5/sysOptions/safeOpts", params).then((res) => {
+      axios.post("/v1/api/sysOptions/safeOpts", params).then((res) => {
         if (res.data.code == 200) {
           ElMessage.success(res.data.msg);
         } else {
@@ -125,9 +133,10 @@ const save = () => {
     }
   });
 };
-const { secureRules } = toRefs(state);
+const { secureFormData, secureRules } = toRefs(state);
 
 defineExpose({
+  setFormData,
   save,
 });
 </script>