[feat](首选项配置): 首选项配置接口对接完成

src/page/main/config/preference/index.vue

@@ -25,29 +25,19 @@
           label-width="110px"
           class="authorizeForm">
           <el-form-item label="当前版本号" prop="system_version">
-            <el-input disabled v-model="authorizeFormData.system_version" maxlength="20" />
+            <el-input disabled v-model="authorizeFormData.system_version" />
           </el-form-item>
           <el-form-item label="User" prop="system_user">
-            <el-input placeholder="统一管理用户认证平台" v-model="authorizeFormData.system_user" maxlength="50" />
+            <el-input placeholder="统一管理用户认证平台" v-model="authorizeFormData.system_user" />
           </el-form-item>
           <el-form-item label="Key" prop="license">
-            <el-input
-              placeholder="请输入"
-              rows="5"
-              maxlength="300"
-              v-model="authorizeFormData.license"
-              show-word-limit
-              type="textarea" />
-            <el-tooltip placement="top-start" effect="light">
-              <template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
-              <div class="tip-image"></div>
-            </el-tooltip>
+            <el-input placeholder="请输入" rows="5" v-model="authorizeFormData.license" type="textarea" />
           </el-form-item>
           <el-form-item label="有效期至" prop="license_dead_date">
-            <el-input disabled v-model="authorizeFormData.license_dead_date" maxlength="50" />
+            <el-input disabled v-model="authorizeFormData.license_dead_date" />
           </el-form-item>
           <el-form-item label="剩余有效期提醒" prop="license_inform_day">
-            <el-input placeholder="请输入" v-model="authorizeFormData.license_inform_day" maxlength="2">
+            <el-input placeholder="请输入" v-model="authorizeFormData.license_inform_day">
               <template #append>天</template>
             </el-input>
             <el-tooltip placement="top-start" effect="light">
@@ -67,45 +57,75 @@
           label-width="110px"
           class="secureForm">
           <div class="passwordItem">
-            <el-form-item label="最低密码强度" prop="synopsis">
-              <el-select placeholder="请选择">
-                <el-option label="低" value="1"> </el-option>
-                <el-option label="高" value="2"> </el-option>
+            <el-form-item label="最低密码强度" prop="min_pwd_level">
+              <el-select v-model="secureFormData.min_pwd_level" placeholder="请选择">
+                <el-option label="弱" :value="1" />
+                <el-option label="中" :value="2" />
+                <el-option label="强" :value="3" />
               </el-select>
               <el-tooltip placement="top-start" effect="light">
-                <template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
+                <template #content>
+                  <span>支持大写字母/小写字符/数字/特殊符号</span>
+                  <br />
+                  <span>密码长度应至少8位字符</span>
+                  <br />
+                  <span>弱：包含两种或两种以下的组合。</span>
+                  <br />
+                  <span>中：包含三种的组合。</span>
+                  <br />
+                  <span>强：包含四种的组合。</span>
+                </template>
                 <div class="tip-image"></div>
               </el-tooltip>
             </el-form-item>
-            <el-form-item label="是否强制修改" prop="force">
-              <el-switch></el-switch>
+            <el-form-item label="是否强制修改" prop="force_update_state">
+              <bg-switch
+                :labels="['否', '是']"
+                :values="[0, 1]"
+                v-model="secureFormData.force_update_state"></bg-switch>
             </el-form-item>
           </div>
-          <el-form-item label="密码有效期" prop="synopsis">
-            <el-input placeholder="请输入" maxlength="20">
+          <el-form-item label="密码有效期" prop="pwd_validity">
+            <el-input placeholder="请输入" v-model.number="secureFormData.pwd_validity">
               <template #append>天</template>
             </el-input>
             <el-tooltip placement="top-start" effect="light">
-              <template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
+              <template #content>
+                <span>单位，天</span>
+                <br />
+                <span>密码有效期是指强制修改密码的周期，例如60天表示用户需要每60天修改一次密码。</span>
+                <br />
+                <span>若配置为0，表示密码有效期为永久</span>
+              </template>
               <div class="tip-image"></div>
             </el-tooltip>
           </el-form-item>
-          <el-form-item label="会话有效期" prop="synopsis">
-            <el-input placeholder="请输入" maxlength="20">
+          <el-form-item label="会话有效期" prop="session_validity">
+            <el-input placeholder="请输入" v-model.number="secureFormData.session_validity">
               <template #append>分钟</template>
             </el-input>
             <el-tooltip placement="top-start" effect="light">
-              <template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
+              <template #content>
+                <span>范围（10~30）</span>
+                <br />
+                <span>单位，分钟</span>
+                <br />
+                <span>会话有效期是指您登录后，一定时间内无操作，系统将自动登出</span>
+              </template>
               <div class="tip-image"></div>
             </el-tooltip>
           </el-form-item>
-          <el-form-item label="访问规则模式" prop="synopsis">
-            <el-select placeholder="请选择">
-              <el-option label="关闭" value="1"> </el-option>
-              <el-option label="打开" value="2"> </el-option>
+          <el-form-item label="访问规则模式" prop="access_rule_state">
+            <el-select placeholder="请选择" v-model="secureFormData.access_rule_state">
+              <el-option label="关闭" :value="0"> </el-option>
+              <el-option label="打开" :value="1"> </el-option>
             </el-select>
             <el-tooltip placement="top-start" effect="light">
-              <template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
+              <template #content>
+                <span>访问规则模式开启后，按照【访问规则管理】配置执行。</span>
+                <br />
+                <span>该模式针对超管无效</span>
+              </template>
               <div class="tip-image"></div>
             </el-tooltip>
           </el-form-item>
@@ -119,35 +139,33 @@
           label-width="125px"
           class="registerForm">
           <bg-form-gap title="登录受限配置"></bg-form-gap>
-          <el-form-item label="登录受限是否启用" prop="force">
-            <el-switch></el-switch>
+          <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">
+          <div class="input_password_config" v-if="registerFormData.login_config_state == 1">
             <span>在</span>
-            <el-form-item prop="minutes" label-width="0">
-              <el-input placeholder="请输入小时数" maxlength="3"></el-input>
+            <el-form-item prop="login_limit_time" label-width="0">
+              <el-input placeholder="请输入小时数" v-model.number="registerFormData.login_limit_time"></el-input>
             </el-form-item>
             <span>小时内</span>
-            <el-form-item prop="times" label-width="0">
-              <el-input placeholder="请输入密码输错次数" maxlength="3"></el-input>
+            <el-form-item prop="login_pwd_error" label-width="0">
+              <el-input placeholder="请输入密码输错次数" v-model.number="registerFormData.login_pwd_error"></el-input>
             </el-form-item>
             <span>次输错密码，自动锁定</span>
-            <el-form-item prop="times" label-width="0">
-              <el-input placeholder="请输入分钟数" maxlength="3"></el-input>
+            <el-form-item prop="login_lock_time" label-width="0">
+              <el-input placeholder="请输入分钟数" v-model.number="registerFormData.login_lock_time"></el-input>
             </el-form-item>
             <span>分钟</span>
-            <el-button type="primary"> 一键还原受限 </el-button>
-            <el-tooltip placement="top-start" effect="light">
-              <template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
-              <div class="tip-image"></div>
-            </el-tooltip>
+            <el-button type="primary">一键还原受限</el-button>
           </div>
           <bg-form-gap title="注册配置"></bg-form-gap>
-
-          <el-form-item label="允许注册" prop="times">
-            <el-radio-group>
-              <el-radio label="1"> 是 </el-radio>
-              <el-radio label="1"> 否 </el-radio>
+          <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>
@@ -160,10 +178,45 @@
 </template>
 
 <script setup>
-import { reactive, toRefs, onBeforeMount } from "vue";
+import { reactive, toRefs, onBeforeMount, ref } from "vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
+const check_time = (rule, value, callback) => {
+  let reg = /^(0|[1-9][0-9]*)$/;
+  setTimeout(() => {
+    if (!reg.test(value)) {
+      callback(new Error("请输入0到90以内的整数且不能以0开头"));
+    } else if (value > 90) {
+      callback(new Error("请输入0到90以内的整数且不能以0开头"));
+    } else {
+      callback();
+    }
+  });
+};
+const check_valid_time = (rule, value, callback) => {
+  let reg = /^(0|[1-9][0-9]*)$/;
+  setTimeout(() => {
+    if (!reg.test(value)) {
+      callback(new Error("请输入整数且不能以0开头"));
+    } else {
+      callback();
+    }
+  });
+};
+const check_value = (rule, value, callback) => {
+  let reg = /^([1-9][0-9]*)$/;
+  setTimeout(() => {
+    if (!reg.test(value)) {
+      callback(new Error("请输入正整数"));
+    } else {
+      callback();
+    }
+  });
+};
+const authorizeFormRef = ref(null);
+const secureFormRef = ref(null);
+const registerFormRef = ref(null);
 const state = reactive({
   //授权信息表单
   authorizeFormData: {
@@ -175,17 +228,71 @@ const state = reactive({
     license_inform_day: "",
   },
   //授权表单校验规则
-  authorizeRules: {},
+  authorizeRules: {
+    license_inform_day: [{ validator: check_time, trigger: "blur" }],
+  },
 
   //安全相关信息表单
-  secureFormData: {},
+  secureFormData: {
+    id: "",
+    min_pwd_level: "",
+    force_update_state: 0,
+    pwd_validity: "",
+    session_validity: "",
+    access_rule_state: "",
+  },
 
   //安全相关表单校验规则
-  secureRules: {},
+  secureRules: {
+    pwd_validity: [
+      {
+        validator: check_valid_time,
+        trigger: "blur",
+      },
+    ],
+    session_validity: [
+      {
+        validator: (rule, value, callback) => {
+          if (value >= 10 && value <= 30) {
+            callback();
+          } else {
+            callback(new Error("请输入正整数，且会话有效期范围为10分钟至30分钟"));
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+  },
   //登录注册配置表单
-  registerFormData: {},
+  registerFormData: {
+    id: "",
+    login_config_state: 0,
+    login_limit_time: "",
+    login_pwd_error: "",
+    login_lock_time: "",
+    register_config_state: 0,
+  },
   //登录注册配置表单校验规则
-  registerRules: {},
+  registerRules: {
+    login_limit_time: [
+      {
+        validator: check_value,
+        trigger: "blur",
+      },
+    ],
+    login_pwd_error: [
+      {
+        validator: check_value,
+        trigger: "blur",
+      },
+    ],
+    login_lock_time: [
+      {
+        validator: check_value,
+        trigger: "blur",
+      },
+    ],
+  },
   //选中项索引
   activeIndex: 1,
   //首选项配置
@@ -212,6 +319,16 @@ const switchMenu = (index) => {
 const getPreferenceConfig = () => {
   axios.get("/apaas/system/v5/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.preferenceConfig = res.data.data;
     } else {
       ElMessage.error(res.data.data);
@@ -219,7 +336,58 @@ const getPreferenceConfig = () => {
   });
 };
 //保存表单项
-const save = () => {};
+const save = () => {
+  let params = {};
+  if (state.activeIndex == 1) {
+    authorizeFormRef.value.validate((valid) => {
+      if (valid) {
+        params = {
+          ...state.authorizeFormData,
+        };
+        postData("/apaas/system/v5/sysOptions/licenseOpts", params);
+      } else {
+        ElMessage.error("请先将表单填写完整");
+      }
+    });
+  } else if (state.activeIndex == 2) {
+    secureFormRef.value.validate((valid) => {
+      if (valid) {
+        params = {
+          ...state.secureFormData,
+        };
+        postData("/apaas/system/v5/sysOptions/safeOpts", params);
+      } else {
+        ElMessage.error("请先将表单填写完整");
+      }
+    });
+  } else {
+    registerFormRef.value.validate((valid) => {
+      if (valid) {
+        params = {
+          ...state.registerFormData,
+        };
+        if (params.login_config_state == 0) {
+          params.login_limit_time = 0;
+          params.login_pwd_error = 0;
+          params.login_lock_time = 0;
+        }
+        postData("/apaas/system/v5/sysOptions/loginOpts", params);
+      } else {
+        ElMessage.error("请先将表单填写完整");
+      }
+    });
+  }
+};
+const postData = (url, params) => {
+  axios.post(url, params).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(res.data.msg);
+      getPreferenceConfig();
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>