Blame view

src/layouts/default/header/LockActionItem.tsx 2.44 KB
陈文彬 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 组件相关
import { defineComponent } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal/index';

// hook
import { BasicForm, useForm } from '/@/components/Form/index';

import headerImg from '/@/assets/images/header.jpg';

import { appStore } from '/@/store/modules/app';
import { userStore } from '/@/store/modules/user';
import Button from '/@/components/Button/index.vue';
import './LockActionItem.less';
const prefixCls = 'lock-modal';
export default defineComponent({
  name: 'LockModal',
  setup(_, { attrs }) {
    const [register, { setModalProps }] = useModalInner();
    // 样式前缀
    const [registerForm, { validateFields, resetFields }] = useForm({
      // 隐藏按钮
      showActionButtonGroup: false,
      // 表单项
      schemas: [
        {
          field: 'password',
27
          label: '',
陈文彬 authored
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
          component: 'InputPassword',
          componentProps: {
            placeholder: '请输入锁屏密码',
          },
          rules: [{ required: true }],
        },
      ],
    });
    /**
     * @description: lock
     */
    async function lock(valid = true) {
      let password: string | undefined = '';

      try {
        if (!valid) {
          password = undefined;
vben authored
45
46
47
        } else {
          const values = (await validateFields()) as any;
          password = values.password;
陈文彬 authored
48
49
50
51
52
53
54
55
56
        }
        setModalProps({
          visible: false,
        });

        appStore.commitLockInfoState({
          isLock: true,
          pwd: password,
        });
vben authored
57
        await resetFields();
陈文彬 authored
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
      } catch (error) {}
    }
    // 账号密码登录
    return () => (
      <BasicModal footer={null} title="锁定屏幕" {...attrs} class={prefixCls} onRegister={register}>
        {() => (
          <div class={`${prefixCls}__entry`}>
            <div class={`${prefixCls}__header`}>
              <img src={headerImg} class={`${prefixCls}__header-img`} />
              <p class={`${prefixCls}__header-name`}>{userStore.getUserInfoState.realName}</p>
            </div>
            <BasicForm onRegister={registerForm} />
            <div class={`${prefixCls}__footer`}>
              <Button type="primary" block class="mt-2" onClick={lock}>
                {() => '锁屏'}
              </Button>
              <Button block class="mt-2" onClick={lock.bind(null, false)}>
                {() => ' 不设置密码锁屏'}
              </Button>
            </div>
          </div>
        )}
      </BasicModal>
    );
  },
});