修改密码

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 .DS_Store
-# dist
+dist
 dist-ssr
 *.local
 .eslintcache

src/api/mobile/user.ts

@@ -33,9 +33,13 @@ export async function httpDelete(data: object = {}): Promise<DataType<any>> {
     data
   });
 }
-//重置密码
-export async function setpwd(data: object): Promise<DataType<any[]>> {
-  return http.request(`post`, `${VITE_PROXY_DOMAIN_REAL}admin/checkpwd`, {
-    data
-  });
+//修改密码
+export async function httpChangePwd(data: object): Promise<DataType<any[]>> {
+  return http.request(
+    `post`,
+    `${VITE_PROXY_DOMAIN_REAL}admin/accoountChangePasswod`,
+    {
+      data
+    }
+  );
 }

src/components/ReTable/src/bar.tsx

@@ -117,8 +117,8 @@ export default defineComponent({
       <>
         <div
           {...attrs}
-          class="pl-3 pr-3 pt-1 pb-1 bg-white dark:bg-dark"
-          style="margin-top:5px;width:100%"
+          class="pl-3 pr-3  pb-1 bg-white dark:bg-dark"
+          style="padding-top:15px;width:100%"
           v-loading={props.loading}
           element-loading-svg={loadingSvg}
           element-loading-svg-view-box="-10, -10, 50, 50"

src/components/resetPassword.vue

@@ -1,201 +0,0 @@
-<script setup lang="ts">
-import { httpChangePwd } from "/@/api/interest/account";
-import { ElMessage, FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch, nextTick } from "vue";
-import { useNav } from "/@/layout/hooks/useNav";
-import { isAlphanumeric, isnumber, validAlphabets } from "/@/utils/validate";
-const { logout } = useNav();
-const formSize = ref("default");
-const ruleFormRef = ref<FormInstance>();
-interface formType {
-  id?: string; //账户id
-  new_password?: string; //新密码
-  confirmPassword?: string; //确认密码
-}
-const props = defineProps({
-  itemId: {
-    type: String,
-    default: ""
-  },
-  showModel: {
-    type: Boolean,
-    default: false
-  }
-});
-const showModelThis = ref(false);
-const emit = defineEmits<{
-  (e: "cancel"): void;
-  (e: "refresh"): void;
-}>();
-const id = ref("");
-const formModel = {
-  id: "", //账户id
-  new_password: "", //新密码
-  confirmPassword: "" //确认密码
-};
-const ruleForm = reactive<formType>(formModel);
-const rules = reactive<FormRules>({
-  new_password: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback(new Error("新密码不能为空！"));
-        } else {
-          if (isnumber(value)) {
-            callback();
-          } else {
-            callback(new Error("新密码只能能为纯数字！"));
-          }
-          // if (!isAlphanumeric(value)) {
-          //   callback(new Error("新密码为6-16位数字字母组合！"));
-          // } else if (value.length < 6 || value.length > 16) {
-          //   callback(new Error("新密码为6-16位数字字母组合！"));
-          // } else if (isnumber(value)) {
-          //   callback(new Error("新密码不能为纯数字！"));
-          // } else if (validAlphabets(value)) {
-          //   callback(new Error("新密码不能为纯字母！"));
-          // } else {
-          //   callback();
-          // }
-        }
-      },
-      trigger: "blur"
-    }
-  ],
-  confirmPassword: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback(new Error("确认密码不能为空！"));
-        } else {
-          if (ruleForm.new_password !== value) {
-            callback(new Error("确认密码与新密码不一致！"));
-          } else {
-            callback();
-          }
-        }
-      },
-
-      trigger: "blur"
-    }
-  ]
-});
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      if (loading.value === true) return;
-      loading.value = true;
-      let model = Object.assign({}, ruleForm);
-      model.id = "36";
-      const { code, message } = await httpChangePwd(model);
-      loading.value = false;
-      if (code === 0) {
-        ElMessage.success("密码修改成功！");
-        showModelThis.value = false;
-        emit("refresh");
-      } else if (code > 100 && code < 140) {
-        showModelThis.value = false;
-        logout();
-      } else {
-        ElMessage.error(message);
-      }
-    } else {
-      console.log("error submit!", fields);
-    }
-  });
-};
-const resetForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.clearValidate();
-  formEl.resetFields();
-  await nextTick(async () => {
-    ruleForm.id = id.value;
-    ruleForm.new_password = ""; //新密码
-    ruleForm.confirmPassword = ""; //确认密码
-  });
-};
-const closeDialog = () => {
-  showModelThis.value = false;
-  emit("cancel");
-};
-
-const loading = ref(true);
-async function initForm() {
-  loading.value = true;
-
-  await resetForm(ruleFormRef.value);
-
-  // console.log(ruleForm);
-  loading.value = false;
-}
-watch(
-  () => {
-    return props.showModel;
-  },
-  () => {
-    const { showModel, itemId } = props;
-    showModelThis.value = showModel;
-    if (showModelThis.value) {
-      id.value = itemId;
-      console.log(id.value);
-      initForm();
-    }
-  }
-);
-</script>
-
-<template>
-  <el-dialog
-    :close-on-press-escape="false"
-    v-model="showModelThis"
-    append-to-body
-    :width="'900px'"
-    title="修改密码"
-    v-loading="loading"
-    @close="closeDialog"
-  >
-    <el-form
-      ref="ruleFormRef"
-      :model="ruleForm"
-      :rules="rules"
-      label-width="90px"
-      style="margin-top: -10px"
-      class="demo-ruleForm"
-      :size="formSize"
-      status-icon
-    >
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="新密码" prop="new_password">
-            <el-input
-              v-model="ruleForm.new_password"
-              placeholder="新密码"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-          <el-form-item label="确认密码" prop="confirmPassword">
-            <el-input
-              v-model="ruleForm.confirmPassword"
-              :maxlength="11"
-              placeholder="确认密码"
-            /> </el-form-item
-        ></el-col>
-      </el-row>
-      <el-col :span="24" class="clear">
-        <el-button
-          type="primary"
-          class="fr"
-          style="margin: 0 0 0 16px"
-          @click="submitForm(ruleFormRef)"
-          >保存</el-button
-        >
-        <el-button class="fr" style="margin: 0 0 0 16px" @click="closeDialog"
-          >关闭</el-button
-        >
-      </el-col>
-    </el-form>
-  </el-dialog>
-</template>

src/components/resetPwd/ResetPwd.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref, unref } from "vue";
+import { BasicForm } from "/@/components/BasicForm";
+import { modalProps } from "./types";
+import { ElMessage } from "element-plus";
+import { useNav } from "/@/layout/hooks/useNav";
+import { responseHandle } from "/@/utils/responseHandle";
+const props = defineProps(modalProps);
+const { logout } = useNav();
+const modelTitle = computed(() => props.modalConfig.title);
+const modelFormItems = computed(() => props.modalConfig.formItems);
+const formData = ref({});
+const formRef = ref<InstanceType<typeof BasicForm>>(null);
+const dialogVisible = ref(false);
+const confirmLoading = ref(false);
+function handleConfirmClick() {
+  formRef.value.validate(async isVaild => {
+    //表单校验通过派发事件
+    if (isVaild) {
+      if (confirmLoading.value) return;
+      if (
+        formData.value[modelFormItems.value[1].field] !==
+        formData.value[modelFormItems.value[2].field]
+      ) {
+        ElMessage.warning("新密码与确认密码不一致");
+        return;
+      }
+      confirmLoading.value = true;
+      const { modalConfig } = props;
+      const { httpChangePwd } = modalConfig;
+      const { code, message } = await httpChangePwd(unref(formData));
+      responseHandle({
+        code,
+        message,
+        logout,
+        hasError: true,
+        handler: () => {
+          dialogVisible.value = false;
+          confirmLoading.value = false;
+          ElMessage.success(message);
+        },
+        error: () => {
+          ElMessage.error(message);
+          confirmLoading.value = false;
+        }
+      });
+    }
+  });
+}
+async function show(id) {
+  modelFormItems.value.forEach(item => {
+    if (item.field === "id") {
+      formData.value[item.field] = id;
+    } else {
+      formData.value[item.field] = "";
+    }
+  });
+  dialogVisible.value = true;
+}
+defineExpose({
+  show
+});
+</script>
+
+<template>
+  <el-dialog
+    :title="modelTitle"
+    v-model="dialogVisible"
+    center
+    destroy-on-close
+    width="500px"
+  >
+    <!-- 表单 -->
+    <BasicForm
+      ref="formRef"
+      v-bind="props.modalConfig"
+      v-model:form-data="formData"
+    />
+
+    <!-- 保存/重置 -->
+    <div class="flex justify-end">
+      <el-button
+        type="primary"
+        :loading="confirmLoading"
+        @click="handleConfirmClick"
+        >保存</el-button
+      >
+      <el-button @click="dialogVisible = false">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>

src/components/resetPwd/index.ts

@@ -1,3 +1,3 @@
-import pageListModal from "./pageListModal.vue";
-
-export default pageListModal;
+import ResetPwd from "./ResetPwd.vue";
+export default ResetPwd;
+export * from "./types";

src/components/resetPwd/pageListModal.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { ref, unref } from "vue";
-import { BasicForm, FormItem } from "/@/components/BasicForm";
-import { modalProps } from "./types";
-
-const props = defineProps(modalProps);
-const { title, api, formItems, formGroup } = props;
-const emit = defineEmits(["confirmBtnClick"]);
-
-const formData = ref({});
-
-const formRef = ref<InstanceType<typeof BasicForm>>(null);
-const dialogVisible = ref(false);
-const confirmLoading = ref(false);
-
-function handleConfirmClick() {
-  console.log(formData.value);
-  formRef.value.validate(async isVaild => {
-    //表单校验通过派发事件
-    if (isVaild) {
-      const { code, data, message } = await api(unref(formData));
-      if (code === 0) {
-        emit("confirmBtnClick");
-      } else {
-        console.log("989");
-      }
-    }
-  });
-}
-
-defineExpose({
-  dialogVisible,
-  confirmLoading
-});
-</script>
-
-<template>
-  <el-dialog
-    :title="title"
-    v-model="dialogVisible"
-    center
-    destroy-on-close
-    width="1040px"
-  >
-    <!-- 表单 -->
-    <BasicForm
-      ref="formRef"
-      v-bind="modalConfig"
-      v-model:form-data="formData"
-    />
-
-    <!-- 保存/重置 -->
-    <div class="flex justify-end">
-      <el-button
-        type="primary"
-        :loading="confirmLoading"
-        @click="handleConfirmClick"
-        >保存</el-button
-      >
-      <el-button @click="dialogVisible = false">关闭</el-button>
-    </div>
-  </el-dialog>
-</template>

src/components/resetPwd/types.ts

@@ -1,4 +1,4 @@
-import pageModal from "./page-modal.vue";
+import ResetPwd from "./ResetPwd.vue";
 import { FormGorup, FormItem } from "/@/components/BasicForm";
 
 interface ContentApiResponse {
@@ -9,17 +9,16 @@ interface ContentApiResponse {
 
 type API = (data: any) => Promise<ContentApiResponse>;
 
-export type PageModalInstance = typeof pageModal & {
-  dialogVisible: boolean;
-  // confirmLoading: boolean;
-  // type: ActionType;
+export type PageModalInstance = typeof ResetPwd & {
+  show: (id?: string) => void;
 };
 
 export interface ModalConfig {
-  title: string;
-  api: API;
+  title: String;
+  ConPwdList: Record<string, string>[];
+  httpChangePwd: API;
   formItems: Array<FormItem>;
-  formGroup: Array<FormGorup>;
+  // formGroup: Array<FormGorup>;
 }
 
 export const modalProps = {

src/utils/responseHandle.ts

@@ -4,18 +4,24 @@ export function responseHandle({
   code,
   message,
   logout,
-  handler
+  hasError,
+  handler,
+  error
 }: {
   code: number;
   message: string;
   logout: any;
+  hasError?: Boolean;
   handler: () => void;
+  error?: () => void;
 }) {
   const c = Number(code);
   if (c === 0) {
     handler();
   } else if (c > 100 && c < 140) {
     logout();
+  } else if (hasError) {
+    error();
   } else {
     ElMessage.error(message);
   }

src/views/interest/account/config/modal.config.ts

@@ -20,8 +20,7 @@ const modalConfig: ModalConfig = {
       type: "select",
       label: "角色",
       placeholder: "角色",
-      options: [],
-      //  await createRoleOptions(),
+      options: await createRoleOptions(),
       rules: [{ required: true, trigger: "change", message: "请选择角色" }]
     },
     {
@@ -29,7 +28,7 @@ const modalConfig: ModalConfig = {
       type: "checkbox",
       label: "卡类型",
       placeholder: "卡类型",
-      options: [], //await createCardOptions(),
+      options: await createCardOptions(),
       rules: [{ required: true, trigger: "change", message: "请选择卡类型" }]
     }
   ]

src/views/interest/account/config/resetPwd.config.ts

@@ -0,0 +1,70 @@
+import { ModalConfig } from "/@/components/ResetPwd";
+import { httpChangePwd } from "/@/api/interest/account";
+import { isAlphanumeric, isnumber, validAlphabets } from "/@/utils/validate";
+const ResetPwd: ModalConfig = {
+  title: "修改密码",
+  httpChangePwd,
+  formItems: [
+    {
+      field: "id",
+      type: "input",
+      labelWidth: "100px",
+      isHidden: true,
+      placeholder: "用户ID"
+    },
+    {
+      field: "new_password",
+      type: "input",
+      placeholder: "新密码",
+      label: "新密码",
+      labelWidth: "100px",
+      span: 24,
+      rules: [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (value === "") {
+              return new Error("新密码不能为空！");
+            } else {
+              if (!isAlphanumeric(value)) {
+                return new Error("新密码为6-16位数字字母组合！");
+              } else if (value.length < 6 || value.length > 16) {
+                return new Error("新密码为6-16位数字字母组合！");
+              } else if (isnumber(value)) {
+                return new Error("新密码不能为纯数字！");
+              } else if (validAlphabets(value)) {
+                return new Error("新密码不能为纯字母！");
+              } else {
+                return true;
+              }
+            }
+          },
+          trigger: "blur"
+        }
+      ]
+    },
+    {
+      field: "confirmPassword",
+      type: "input",
+      placeholder: "确认密码",
+      label: "确认密码",
+      labelWidth: "100px",
+      span: 24,
+      rules: [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (value === "") {
+              return new Error("新密码不能为空！");
+            } else {
+              return true;
+            }
+          },
+          trigger: "blur"
+        }
+      ]
+    }
+  ]
+};
+
+export default ResetPwd;

src/views/interest/account/index.vue

@@ -8,7 +8,8 @@ import { PageModal, usePageModal } from "/@/components/PageModal";
 import { PageContent } from "/@/components/PageContent";
 import { httpDetail } from "/@/api/interest/account";
 import { useResponseHandle } from "/@/hooks/useAsync";
-import resetPassword from "/@/components/resetPassword.vue";
+import ResetPwd from "/@/components/ResetPwd";
+import resetPwdConfig from "./config/resetPwd.config";
 const pageName = "account";
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
   undefined,
@@ -25,10 +26,8 @@ const {
 } = usePageModal({
   pageContentRef
 });
-
+const resetPwdRef = ref<InstanceType<typeof ResetPwd>>(null);
 const responseHandle = useResponseHandle();
-const passwordModelId = ref("");
-const passwordModel = ref(false);
 async function handleDetailData(row, type) {
   const { id } = row;
   const { code, data, message } = await httpDetail({ id: id });
@@ -47,11 +46,6 @@ async function handleDetailData(row, type) {
     }
   });
 }
-
-function handleChangePwdData(id) {
-  passwordModelId.value = id;
-  passwordModel.value = true;
-}
 </script>
 
 <template>
@@ -67,7 +61,7 @@ function handleChangePwdData(id) {
     @create-btn-click="handleCreateData"
     @preview-btn-click="row => handleDetailData(row, 'preview')"
     @update-btn-click="row => handleDetailData(row, 'update')"
-    @change-pwd-btn-click="({ id }) => handleChangePwdData(id)"
+    @change-pwd-btn-click="({ id }) => resetPwdRef.show(id)"
   />
   <PageModal
     ref="pageModalRef"
@@ -75,11 +69,6 @@ function handleChangePwdData(id) {
     :default-info="defaultInfo"
     @confirm-btn-click="handleConfrim"
   />
-  <reset-password
-    :itemId="passwordModelId"
-    :show-model="passwordModel"
-    @refresh="passwordModel = false"
-    @cancel="passwordModel = false"
-  />
+  <ResetPwd ref="resetPwdRef" :modalConfig="resetPwdConfig" />
   <!-- </PageAuth> -->
 </template>

src/views/login/index.vue

@@ -60,7 +60,7 @@ const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
-  username: "test",
+  username: "test1",
   password: "123456",
   verifyCode: ""
 });

src/views/mobile/user/config/content.config.ts

@@ -1,9 +1,5 @@
 import { ContentConfig } from "/@/components/PageContent";
-import {
-  // httpDelete,
-  httpList,
-  httpUpdate
-} from "/@/api/mobile/user";
+import { httpChangePwd, httpList, httpUpdate } from "/@/api/mobile/user";
 import { renderStatus, timeInterval } from "/@/utils/column-helper";
 import { ACCOUNT_STATUS_OPTIONS } from "/@/config/status";
 
@@ -62,7 +58,7 @@ const contentConfig: ContentConfig = {
   title: "用户管理",
   columns,
   apis: {
-    // httpDelete,
+    httpChangePwd,
     httpList,
     httpUpdate
   },

src/views/mobile/user/config/resetPwd.config.ts

@@ -0,0 +1,70 @@
+import { ModalConfig } from "/@/components/ResetPwd";
+import { httpChangePwd } from "/@/api/mobile/user";
+import { isAlphanumeric, isnumber, validAlphabets } from "/@/utils/validate";
+const ResetPwd: ModalConfig = {
+  title: "修改密码",
+  httpChangePwd,
+  formItems: [
+    {
+      field: "id",
+      type: "input",
+      labelWidth: "100px",
+      isHidden: true,
+      placeholder: "用户ID"
+    },
+    {
+      field: "new_password",
+      type: "input",
+      placeholder: "新密码",
+      label: "新密码",
+      labelWidth: "100px",
+      span: 24,
+      rules: [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (value === "") {
+              return new Error("新密码不能为空！");
+            } else {
+              if (!isAlphanumeric(value)) {
+                return new Error("新密码为6-16位数字字母组合！");
+              } else if (value.length < 6 || value.length > 16) {
+                return new Error("新密码为6-16位数字字母组合！");
+              } else if (isnumber(value)) {
+                return new Error("新密码不能为纯数字！");
+              } else if (validAlphabets(value)) {
+                return new Error("新密码不能为纯字母！");
+              } else {
+                return true;
+              }
+            }
+          },
+          trigger: "blur"
+        }
+      ]
+    },
+    {
+      field: "confirmPassword",
+      type: "input",
+      placeholder: "确认密码",
+      label: "确认密码",
+      labelWidth: "100px",
+      span: 24,
+      rules: [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (value === "") {
+              return new Error("新密码不能为空！");
+            } else {
+              return true;
+            }
+          },
+          trigger: "blur"
+        }
+      ]
+    }
+  ]
+};
+
+export default ResetPwd;

src/views/mobile/user/index.vue

@@ -11,8 +11,8 @@ import { useResponseHandle } from "/@/hooks/useAsync";
 import { httpDetail } from "/@/api/mobile/user";
 import { projectFormConfig } from "./config/_details";
 import { projectFormRules } from "./config/_rules";
-// import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-// import resetPassword from "/@/components/resetPassword.vue";
+import ResetPwd from "/@/components/ResetPwd";
+import resetPwdConfig from "./config/resetPwd.config";
 
 import {
   BasicForm,
@@ -37,6 +37,7 @@ const {
 } = usePageModal({
   pageContentRef
 });
+const resetPwdRef = ref<InstanceType<typeof ResetPwd>>(null);
 
 const responseHandle = useResponseHandle();
 const Video_id = ref("");
@@ -101,8 +102,8 @@ function videoChange(e) {
     :content-config="contentConfig"
     @preview-btn-click="row => handleDetailData(row, 'preview')"
     @update-btn-click="row => handleDetailData(row, 'update')"
+    @change-pwd-btn-click="({ id }) => resetPwdRef.show(id)"
   />
-  <!--需要优化 添加修改密码和重置密码功能 PageContent-->
   <PageModal
     ref="pageModalRef"
     :modal-config="modalConfig"
@@ -163,11 +164,6 @@ function videoChange(e) {
       </template>
     </BasicForm>
   </PageModal>
-  <!-- <reset-password
-    :itemId="passwordModelId"
-    :show-model="passwordModel"
-    @refresh="passwordModel = false"
-    @cancel="passwordModel = false"
-  /> -->
+  <ResetPwd ref="resetPwdRef" :modalConfig="resetPwdConfig" />
   <!-- </PageAuth> -->
 </template>