lis8.0-vue3/src/components/userVerification/index.vue

<template>
  <div>
    <el-dialog v-model="visible" :title="title" :width="500" :close-on-click-modal="false" :draggable="true">
      <el-form ref="formRef" :model="formData" label-width="100px">
        <!-- 用户代号 -->
        <el-form-item label="用户代号：" prop="yhdh" :rules="[{ required: true, message: '请输入用户代号', trigger: 'change' }]">
          <el-input ref="yhdhRef" v-model="formData.yhdh" @change="handleChange" />
        </el-form-item>

        <!-- 用户姓名 -->
        <el-form-item label="用户姓名：">
          <el-input v-model="formData.userName" disabled />
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item label="密码：" prop="mm" :rules="[{ required: true, message: '请输入密码', trigger: 'change' }]">
          <el-input v-model="formData.mm" type="password" @keyup.enter="handleConfirm" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer" style="text-align: center;">
          <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
          <el-button @click="cancel"> 取消 </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { checkYsUser } from '@/api/liswork/work/LisWork'
interface UserInfo {
  usenName: string,
  nickName: string,
}
const props = defineProps({

  labPatKey: {
    type: Object,
    default: () => { }
  },
  userList: {
    type: Array as PropType<UserInfo[]>,
    default: () => []
  },

  title: {
    type: String,
    default: '请输入锁定人员账号密码'
  }
});
const visible = ref(false);
// 表单数据
const formData = ref({
  yhdh: '',
  userName: '',
  mm: '',
})

const formRef = ref();
const yhdhRef = ref();
const open = () => {
  visible.value = true
  nextTick(() => {
    setTimeout(() => {
      yhdhRef.value?.focus();
    }, 100);
  });
}

const emit = defineEmits(["confirm"]);
// 处理确定按钮点击
const handleConfirm = async () => {
  if (!formRef.value) return;

  // 表单验证
  const valid = await formRef.value.validate();
  if (valid) {
    checkYsUser({ ...formData.value, ...props.labPatKey }).then((res: any) => {
      if (res.code == 0) {
        emit('confirm', formData.value)
      }
    })

  }
};

// 处理取消按钮点击
const cancel = () => {
  formData.value = {
    yhdh: '',
    userName: '',
    mm: '',
  }
  formRef.value?.resetFields();
  visible.value = false
};


const handleChange = (value: string) => {
  formData.value.userName = props.userList.find((item: any) => item.userName == value)?.nickName || value
};


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

<style scoped></style>