feat: 添加修改密码功能和相关API，优化用户管理界面

apps/web-ele/src/api/account/index.ts

@@ -34,6 +34,15 @@ export async function getAccountDetailApi(data: { accountid: string }) {
 }
 
 /**
+ * 客户_职员_视图列表
+ */
+export async function getAccountWorkerListApi(params: AccountQueryParams) {
+  return requestClient.post<any>('/api/query/list?pagevalue=122', {
+    ...params,
+  });
+}
+
+/**
  * 账号信息_新增
  */
 export async function addAccountApi(data: AccountEntity) {

apps/web-ele/src/views/system-manage/user-manage/change-password-form.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { AccountEntity } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+import { md5 } from 'js-md5';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { editAccountApi } from '#/api/account';
+
+const emit = defineEmits(['finish']);
+const data = ref<{ row: Partial<AccountEntity> }>({ row: {} });
+
+const schema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'accountpwd',
+    label: '新密码',
+    rules: z.string().min(1, '请输入新密码'),
+    componentProps: {
+      type: 'password',
+      placeholder: '请输入新密码',
+      showPassword: true,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'confirmPassword',
+    label: '确认密码',
+    rules: z.string().min(1, '请再次输入新密码'),
+    componentProps: ({ form }) => ({
+      type: 'password',
+      placeholder: '请再次输入新密码',
+      showPassword: true,
+      onBlur: () => {
+        form.validateField('accountpwd');
+      },
+    }),
+  },
+];
+
+const [BaseForm, baseFormApi] = useVbenForm({
+  showDefaultActions: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    labelWidth: 130,
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/3',
+  title: '修改密码',
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    const values = await baseFormApi.getValues();
+    if (values.accountpwd !== values.confirmPassword) {
+      ElMessage.error('两次输入的密码不一致');
+      return;
+    }
+
+    try {
+      await editAccountApi({
+        'accountid.value': data.value.row.accountid,
+        accountpwd: md5(values.accountpwd),
+      } as any);
+
+      ElMessage.success('密码修改成功!');
+      emit('finish');
+      modalApi.close();
+    } catch {}
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      data.value = modalApi.getData();
+      baseFormApi.setValues({
+        accountpwd: '',
+        confirmPassword: '',
+      });
+    }
+  },
+});
+
+function openModal(rowData: any) {
+  modalApi.setData({ row: rowData });
+  modalApi.open();
+}
+
+defineExpose({
+  openModal,
+});
+</script>
+
+<template>
+  <Modal>
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/system-manage/user-manage/index.vue

@@ -7,17 +7,27 @@ import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
 import { h, onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { MdiDelete, MdiDetail, MdiEdit } from '@vben/icons';
+import {
+  MdiDelete,
+  MdiDetail,
+  MdiEdit,
+  MdiPasswordVerified,
+} from '@vben/icons';
 
 import { ElMessage, ElMessageBox, ElTag } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteAccountApi, getAccountListApi } from '#/api/account';
+import { deleteAccountApi, getAccountWorkerListApi } from '#/api/account';
 import { getRoleListApi } from '#/api/role';
 import { $t } from '#/locales';
 
+import ChangePasswordForm from './change-password-form.vue';
 import AccountForm from './form.vue';
 
+const changePasswordFormRef = ref<InstanceType<
+  typeof ChangePasswordForm
+> | null>(null);
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: true,
@@ -74,7 +84,7 @@ const gridOptions: VxeGridProps<any> = {
     },
     ajax: {
       query: async ({ page }, formValues) => {
-        return await getAccountListApi({
+        return await getAccountWorkerListApi({
           pageindex: page.currentPage,
           rows: page.pageSize,
           ...formValues,
@@ -120,13 +130,13 @@ const gridOptions: VxeGridProps<any> = {
     // { title: '到期时间', field: 'accountenddate' },
     // { title: '更新时间', field: 'accountupdate' },
     // { title: '更新人', field: 'accountupuser' },
-    { title: '关联职员id', field: 'accountworkerid', sortable: true },
+    { title: '关联职员', field: 'worker_xm', sortable: true },
     {
       title: '操作',
       field: 'action',
       fixed: 'right',
       slots: { default: 'action' },
-      width: 150,
+      width: 180,
     },
   ],
 };
@@ -202,6 +212,11 @@ function handleEdit(row: any) {
   modalApi.setData({ formType: 'edit', row }).open();
 }
 
+/* 修改密码 */
+function handleChangePassword(row: any) {
+  changePasswordFormRef.value?.openModal(row);
+}
+
 /* 详情 */
 function handleDetail(row: any) {
   modalApi.setState({ showCancelButton: false });
@@ -265,6 +280,19 @@ function handleFinish() {
         <el-tooltip
           class="box-item"
           effect="dark"
+          content="修改密码"
+          placement="top"
+        >
+          <el-button
+            round
+            @click="() => handleChangePassword(row)"
+            :icon="MdiPasswordVerified"
+            class="!p-2"
+          />
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
           content="删除"
           placement="top"
         >
@@ -278,5 +306,6 @@ function handleFinish() {
       </template>
     </Grid>
     <Modal @finish="handleFinish" />
+    <ChangePasswordForm ref="changePasswordFormRef" @finish="handleFinish" />
   </Page>
 </template>

packages/icons/src/iconify/index.ts

@@ -30,3 +30,5 @@ export const MdiCheckboxMultipleMarked = createIconifyIcon(
 );
 
 export const MdiMagnify = createIconifyIcon('mdi:magnify');
+
+export const MdiPasswordVerified = createIconifyIcon('mdi:password-verified');