Primitive — nhập liệu

Ô nhập của form. Import từ @tasco/ui, dùng như antdv.

import {
  CInput, CTextarea, CInputNumber, CInputSearch,
  CSelect, CSelectOption, CCheckbox, CCheckboxGroup, CRadio, CRadioGroup, CSwitch,
  CDatePicker, CRangePicker, CTimePicker, CFormItem, CUpload,
} from '@tasco/ui'

<script setup lang="ts">
import { ref } from 'vue'
import {
  CCheckbox,
  CDatePicker,
  CFormItem,
  CInput,
  CInputNumber,
  CRangePicker,
  CSelect,
  CSelectOption,
  CSwitch,
  CTextarea,
} from '@tasco/ui'

// Primitive nhập liệu: import từ @tasco/ui, dùng y như antdv. Locale vi_VN do layer
// áp sẵn nên DatePicker hiện tiếng Việt.
const model = ref({
  name: 'Công ty An Bình',
  quantity: 3,
  channel: 'direct',
  date: undefined as string | undefined,
  range: undefined as [string, string] | undefined,
  active: true,
  agree: false,
  note: '',
})
</script>

<template>
  <CForm style="max-width: 420px">
    <CFormItem label="Tên khách hàng">
      <CInput v-model:value="model.name" />
    </CFormItem>

    <CFormItem label="Số lượng">
      <CInputNumber
        v-model:value="model.quantity"
        :min="1"
        style="width: 100%"
      />
    </CFormItem>

    <CFormItem label="Kênh bán">
      <CSelect v-model:value="model.channel">
        <CSelectOption value="direct">
          Trực tiếp
        </CSelectOption>
        <CSelectOption value="online">
          Trực tuyến
        </CSelectOption>
      </CSelect>
    </CFormItem>

    <CFormItem label="Ngày giao">
      <CDatePicker
        v-model:value="model.date"
        value-format="YYYY-MM-DD"
        style="width: 100%"
      />
    </CFormItem>

    <CFormItem label="Kỳ báo cáo">
      <CRangePicker
        v-model:value="model.range"
        value-format="YYYY-MM-DD"
        style="width: 100%"
      />
    </CFormItem>

    <CFormItem label="Ghi chú">
      <CTextarea
        v-model:value="model.note"
        :rows="2"
      />
    </CFormItem>

    <CFormItem>
      <div style="display: flex; gap: 16px; align-items: center">
        <CSwitch v-model:checked="model.active" />
        <span>Đang hoạt động</span>
        <CCheckbox v-model:checked="model.agree">
          Đồng ý điều khoản
        </CCheckbox>
      </div>
    </CFormItem>
  </CForm>
</template>

Chọn đúng component

Dữ liệu	Component	Ghi chú
Chữ ngắn	CInput	allow-clear cho ô lọc
Chữ dài	CTextarea	Luôn đặt :rows
Số đếm	CInputNumber	:min, :max; thêm style="width: 100%" trong form
Tiền	CInputCurrency	Model là số
Phần trăm	CInputPercent	Model là chuỗi
Chọn một	CSelect + CSelectOption	show-search khi trên 10 lựa chọn
Chọn nhiều	CSelect mode="multiple"
Hai trạng thái	CSwitch	Đổi là áp dụng ngay
Nhiều lựa chọn độc lập	CCheckboxGroup
Một trong vài lựa chọn nhìn thấy hết	CRadioGroup	Trên 5 lựa chọn thì dùng CSelect
Ngày	CDatePicker
Khoảng ngày	CRangePicker
Tệp	CUpload	Gửi bằng FormData qua useApi

Ngày tháng

<CDatePicker v-model:value="model.date" value-format="YYYY-MM-DD" />
<CRangePicker v-model:value="model.range" value-format="YYYY-MM-DD" />

Luôn khai value-format: không có nó, model là đối tượng dayjs và backend nhận được chuỗi khó đoán. YYYY-MM-DD là định dạng thống nhất của framework — xem Hợp đồng dữ liệu.

Giao diện hiển thị theo locale vi_VN mà layer đã áp. Tên tháng và thứ đến từ dayjs — dự án cần tiếng Việt cho phần đó thì nạp dayjs/locale/vi.

CFormItem

<CFormItem label="Khách hàng" name="customer">
  <CInput v-model:value="model.customer" />
</CFormItem>

name phải trùng khoá trong model và rules, nếu không rule không chạy. Xem CForm.

Tải tệp

<CUpload
  :max-count="1"
  :before-upload="() => false"
  @change="onFileChange"
>
  <CButton variant="outline">Chọn tệp</CButton>
</CUpload>

:before-upload="() => false" chặn antd tự gửi — dự án gửi qua useApi để request đi đúng đường BFF và có token:

const form = new FormData()
form.append('file', file)
await api('/orders/import', { method: 'POST', body: form })

Lưu ý

• Ô nhập trong form luôn có CFormItem với label — placeholder không thay được nhãn.
• Đặt style="width: 100%" cho CInputNumber, CSelect, CDatePicker khi nằm trong form dọc, nếu không chúng co lại theo nội dung.
• Danh sách lựa chọn dài thì tải từ backend và bật show-search, đừng render vài trăm CSelectOption.

Liên quan

• CForm · Trang form.
• Primitive — phản hồi.