lis8.0-vue3/src/views/liswork/work/components/CheckUser.vue

<template>
  <div>
    <el-dialog v-model="checkShow" :title="title" width="500" :close-on-click-modal="false" :draggable="true"
      @close="handleCancel">
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户工号：" prop="yhdh">
          <el-input ref="yhdhRef" v-model.trim="ruleForm.yhdh" placeholder="请输入用户工号" maxlength="20"
            @keyup.enter="handleConfirm" />
        </el-form-item>
        <el-form-item label="密码：" prop="mm">
          <el-input v-model.trim="ruleForm.mm" placeholder="请输入密码" type="mm" maxlength="20" show-password
            @keyup.enter="handleConfirm" />
        </el-form-item>
        <el-form-item>
          <div style="text-align: center; width: 100%;">
            <el-button type="primary" @click="handleConfirm()"> 确认 </el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { set } from '@vueuse/core';
import { defineProps, defineEmits, ref, watch } from 'vue';

// 组件属性
const props = defineProps({
  // 弹窗标题（由外部参数控制）
  title: {
    type: String,
    default: '用户身份验证'
  },
  // 验证规则（可选，由外部传入）
  validationRules: {
    type: Object,
    default: () => ({
      // 工号最小长度
      userIdMinLength: 3,
      // 密码最小长度
      passwordMinLength: 6
    })
  }
});

// 组件事件
const emit = defineEmits([
  'onConfirm',       // 验证成功回调
  'onCancel'
]);

// 表单数据
const ruleForm = ref({
  yhdh: '',
  mm: '',
});

const rules = ref(
  {
    yhdh: [{ required: true, message: "请输入用户工号", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
    ],
    mm: [{ required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
    ]
  }
);
const yhdhRef = ref();
const open = () => {
  checkShow.value = true;
  nextTick(() => {
    setTimeout(() => {
      yhdhRef.value.focus();
    }, 100);
  });
};
const checkShow = ref(false);
const ruleFormRef = ref();
// 处理确认验证
const handleConfirm = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      emit('onConfirm', { yhdh: ruleForm.value.yhdh, mm: ruleForm.value.mm });
      checkShow.value = false;
    } else {
      return false;
    }
  });
};


const handleCancel = () => {
  checkShow.value = false;
  ruleForm.value.yhdh = '';
  ruleForm.value.mm = '';
  ruleFormRef.value.resetFields();
  emit('onCancel');
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss"></style>