hrm/app/components/viewer/HRM.vue

<script setup>
import EmpRow from '@/components/viewer/EmpRow.vue';

const employees = [
  {
    code: 'EMP001',
    name: 'Nguyễn Văn An',
    email: 'an.nguyen@company.com',
    phone: '0923839126',
    department: 'Kinh doanh',
    title: 'Trưởng phòng',
    start_date: '2024-02-15',
    showroom: 'Showroom Hà Nội',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP002',
    name: 'Trần Thị Bình',
    email: 'binh.tran@company.com',
    phone: '0923839126',
    department: 'Marketing',
    title: 'Nhân viên',
    start_date: '2024-02-15',
    showroom: 'Showroom Hà Nội',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP003',
    name: 'Lê Hoàng Cường',
    email: 'cuong.le@company.com',
    phone: '0923839126',
    department: 'Kinh doanh',
    title: 'Nhân viên kinh doanh',
    start_date: '2024-02-15',
    showroom: 'Showroom Hồ Chí Minh',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP004',
    name: 'Phạm Thị Dung',
    email: 'dung.pham@company.com',
    phone: '0923839126',
    department: 'Kế toán',
    title: 'Kế toán trưởng',
    start_date: '2024-02-15',
    showroom: 'Showroom Hà Nội',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP005',
    name: 'Võ Minh Em',
    email: 'em.vo@company.com',
    phone: '0923839126',
    department: 'Kỹ thuật',
    title: 'Kỹ sư',
    start_date: '2024-02-15',
    showroom: 'Showroom Hà Nội',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP006',
    name: 'Hoàng Văn Phúc',
    email: 'phuc.hoang@company.com',
    phone: '0923839126',
    department: 'Kinh doanh',
    title: 'Nhân viên kinh doanh',
    start_date: '2024-02-15',
    showroom: 'Showroom Đà Nẵng',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP007',
    name: 'Đỗ Thị Giang',
    email: 'giang.do@company.com',
    phone: '0923839126',
    department: 'Hành chính',
    title: 'Nhân viên hành chính',
    start_date: '2024-02-15',
    showroom: 'Showroom Cần Thơ',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
  {
    code: 'EMP008',
    name: 'Bùi Văn Hải',
    email: 'hai.bui@company.com',
    phone: '0923839126',
    department: 'Kinh doanh',
    title: 'Quản lý showroom',
    start_date: '2024-02-15',
    showroom: 'Showroom Hà Nội',
    status: 'Đang làm',
    address: 'Hà Nội',
    contract_type: 'Thử việc',
    contract_exp: '2026-05-20',
    contract_basic_salary: '12000000.00',
  },
];

const inputVal = ref('');
const selectedDepartment = ref('');
const selectedShowroom = ref('');

const filteredEmps = computed(() => {
  return employees.filter((emp) => {
    const values = Object.values(emp);

    const departmentCond = selectedDepartment.value
      ? selectedDepartment.value === emp.department
      : true;

    const showroomCond = selectedShowroom.value
      ? selectedShowroom.value === emp.showroom
      : true;

    const inputCond = values.some((val) =>
      inputVal.value
        ? val.toLowerCase().includes(inputVal.value.toLowerCase())
        : true,
    );
    return inputCond && departmentCond && showroomCond;
  });
});
</script>
<template>
  <div id="search" class="mb-4 columns">
    <div class="column">
      <div class="field">
        <div class="control has-icons-left has-icons-right">
          <input
            class="input"
            type="text"
            placeholder="Tìm kiếm theo tên hoặc mã nhân viên"
            v-model="inputVal"
          />
          <span class="icon is-small is-left">
            <SvgIcon v-bind="{ name: 'search.svg', size: 16, type: 'grey' }" />
          </span>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="field">
        <div class="control">
          <div class="select is-fullwidth">
            <select v-model="selectedDepartment">
              <option value="">Tất cả phòng ban</option>
              <option>Kinh doanh</option>
              <option>Marketing</option>
              <option>Kế toán</option>
              <option>Kỹ thuật</option>
              <option>Hành chính</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="field">
        <div class="control">
          <div class="select is-fullwidth">
            <select v-model="selectedShowroom">
              <option value="">Tất cả showroom</option>
              <option>Showroom Hà Nội</option>
              <option>Showroom Hồ Chí Minh</option>
              <option>Showroom Đà Nẵng</option>
              <option>Showroom Cần Thơ</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <p class="mb-2">Danh sách nhân viên</p>
    <table class="table w-full fs-14">
      <thead>
        <tr>
          <th scope="col">Mã NV</th>
          <th scope="col">Họ tên</th>
          <th scope="col">Phòng ban</th>
          <th scope="col">Chức vụ</th>
          <th scope="col">Showroom</th>
          <th scope="col">Trạng thái</th>
          <th scope="col">Thao tác</th>
        </tr>
      </thead>
      <tbody>
        <EmpRow
          v-for="employee in filteredEmps"
          :key="employee.code"
          :row="employee"
        />
      </tbody>
    </table>
  </div>
</template>