Ben Lin
2024-09-12 a4ee6ba0ca28833cbbb8cf0e675561b10fa4c1af
src/layouts/default/header/components/lock/LockModal.vue
@@ -24,71 +24,60 @@
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
<script lang="ts" setup>
  import { computed } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useDesign } from '@/hooks/web/useDesign';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { useUserStore } from '/@/store/modules/user';
  import { useLockStore } from '/@/store/modules/lock';
  import headerImg from '/@/assets/images/header.jpg';
  export default defineComponent({
    name: 'LockModal',
    components: { BasicModal, BasicForm },
  import { useUserStore } from '@/store/modules/user';
  import { useLockStore } from '@/store/modules/lock';
  import headerImg from '@/assets/images/header.jpg';
    setup() {
      const { t } = useI18n();
      const { prefixCls } = useDesign('header-lock-modal');
      const userStore = useUserStore();
      const lockStore = useLockStore();
  defineOptions({ name: 'LockModal' });
      const getRealName = computed(() => userStore.getUserInfo?.realName);
      const [register, { closeModal }] = useModalInner();
  const { t } = useI18n();
  const { prefixCls } = useDesign('header-lock-modal');
  const userStore = useUserStore();
  const lockStore = useLockStore();
      const [registerForm, { validateFields, resetFields }] = useForm({
        showActionButtonGroup: false,
        schemas: [
          {
            field: 'password',
            label: t('layout.header.lockScreenPassword'),
            colProps: {
              span: 24,
            },
            component: 'InputPassword',
            required: true,
          },
        ],
      });
  const getRealName = computed(() => userStore.getUserInfo?.realName);
  const [register, { closeModal }] = useModalInner();
      async function handleLock() {
        const values = (await validateFields()) as any;
        const password: string | undefined = values.password;
        closeModal();
  const [registerForm, { validate, resetFields }] = useForm({
    showActionButtonGroup: false,
    schemas: [
      {
        field: 'password',
        label: t('layout.header.lockScreenPassword'),
        colProps: {
          span: 24,
        },
        component: 'InputPassword',
        required: true,
      },
    ],
  });
        lockStore.setLockInfo({
          isLock: true,
          pwd: password,
        });
        await resetFields();
      }
  const handleLock = async () => {
    const { password = '' } = await validate<{
      password: string;
    }>();
      const avatar = computed(() => {
        const { avatar } = userStore.getUserInfo;
        return avatar || headerImg;
      });
    closeModal();
      return {
        t,
        prefixCls,
        getRealName,
        register,
        registerForm,
        handleLock,
        avatar,
      };
    },
    lockStore.setLockInfo({
      isLock: true,
      pwd: password,
    });
    await resetFields();
  };
  const avatar = computed(() => {
    const { avatar } = userStore.getUserInfo;
    return avatar || headerImg;
  });
</script>
<style lang="less">