web/app/components/people/PeopleInfo.vue

<template>
  <div v-if="record">
    <div class="columns is-multiline mx-0 is-2">
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ findLang('code') }}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input class="input has-text-black" disabled type="text" placeholder="" v-model="record.code">
          </div>
          <p class="help is-danger" v-if="errors.code">{{ errors.code }}</p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ findLang('name') }}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input class="input" type="text" placeholder="" v-model="record.fullname">
          </div>
          <p class="help is-danger" v-if="errors.fullname">{{ errors.fullname }}</p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">Điện thoại<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <InputPhone v-bind="{ record: record, attr: 'phone', placeholder: '' }" @phone="selected('phone', $event)">
            </InputPhone>
          </div>
          <p class="help is-danger" v-if="errors.phone">{{ errors.phone }}
            <a class="has-text-primary" v-if="existedPeople" @click="showPeople()">Chi tiết</a>
          </p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">Email</label>
          <div class="control">
            <InputEmail v-bind="{ record: record, attr: 'email', placeholder: '' }" @email="selected('email', $event)">
            </InputEmail>
          </div>
          <p class="help is-danger" v-if="errors.email">{{ errors.email }}</p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ findLang('gender') }}</label>
          <div class="control">
            <SearchBox
              v-bind="{ vdata: store.sex, api: 'sex', field: 'name', column: ['name'], first: true, optionid: record.sex }"
              @option="selected('_sex', $event)"></SearchBox>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ findLang('dob') }}</label>
          <div class="control">
            <Datepicker v-bind="{ record: record, attr: 'dob', maxdate: new Date(), position: 'is-bottom-left' }"
              @date="selected('dob', $event)"></Datepicker>
          </div>
          <p class="help is-danger" v-if="errors.dob">{{ errors.dob }}</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="field">
          <label class="label">Địa chỉ liên hệ</label>
          <div class="control">
            <input class="input" type="text" placeholder="" v-model="record.address" />
          </div>
          <p class="help is-danger" v-if="errors.address"></p>
        </div>
      </div>
      <div class="column is-6">
        <div class="field">
          <label class="label">Địa chỉ thường trú</label>
          <div class="control">
            <input class="input" type="text" placeholder="" v-model="record.contact_address" />
          </div>
          <p class="help is-danger" v-if="errors.contact_address"></p>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ findLang('personal_id') }}</label>
          <div class="control">
            <SearchBox
              v-bind="{ api: 'legaltype', field: 'name', column: ['name'], first: true, optionid: record.legal_type, filter: { code__in: ['CCCD', 'CC'] } }"
              @option="selected('_legal_type', $event)"></SearchBox>
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ findLang('idnum') }}</label>
          <div class="control">
            <input class="input" type="text" placeholder="" v-model="record.legal_code">
          </div>
          <p class="help is-danger" v-if="errors.legal_code"></p>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ findLang('issued_date') }}</label>
          <div class="control">
            <Datepicker v-bind="{ record: record, attr: 'issued_date', maxdate: new Date(), position: 'is-top-left' }"
              @date="selected('issued_date', $event)"></Datepicker>
          </div>
          <p class="help is-danger" v-if="errors.issued_date">{{ errors.issued_date }}</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ findLang('issued_place') }}</label>
          <div class="control">
            <SearchBox v-bind="{
              api: 'issuedplace',
              field: 'name',
              column: ['name'],
              first: true,
              optionid: record.issued_place,
              filter: { code__in: ['BCA', 'XNC'] } // Bộ Công an, Cục Cảnh sát QLHC về TTXH
            }" @option="selected('_issued_place', $event)"></SearchBox>
          </div>
          <p class="help is-danger" v-if="errors.issued_place"></p>
        </div>
      </div>
    </div>
    <div class="mt-3">
      <button class="button is-primary has-text-white" @click="update()">{{ findLang('save') }}</button>
    </div>
    <Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
  </div>
</template>
<script setup>
import InputPhone from '~/components/common/InputPhone'
import InputEmail from '~/components/common/InputEmail'
import SearchBox from '~/components/SearchBox'
import Datepicker from '~/components/datepicker/Datepicker'

import { useStore } from '~/stores/index'
var props = defineProps({
  pagename: String,
  row: Object
})
const store = useStore()
const { $find, $getdata, $updateapi, $findapi, $getapi, $empty, $errPhone, $errEmail, $resetNull, $snackbar, $insertapi, $updatepage } = useNuxtApp()
const emit = defineEmits(['update'])
var viewport = store.viewport
var companyAddon = { component: 'customer/Company', with: '55%', height: '400px', title: findLang('company') }
var companyviewAddon = { component: 'customer/Company', width: '50%', height: '400px', title: findLang('company') }
var errors = ref({})
var record = ref()
var showmodal = ref()
var existedPeople = undefined
async function initData() {
  if (props.row) {
    let conn = $findapi('people')
    conn.params.filter = { id: props.row.customer || props.row.id }
    let rs = await $getapi([conn])
    let found = $find(rs, { name: 'people' })
    if (found.data.rows.length > 0) record.value = found.data.rows[0]
  } else {
    // let code = await $getdata('getcodepeople')
    record.value = {}
  }
}
function findLang(code) {
  let found = $find(store.common, { code: code })
  return found ? found[store.lang] : ''
}
function showPeople() {
  showmodal.value = {
    component: 'people/PeopleView', width: '60%', height: '600px', title: 'Người liên quan',
    vbind: { row: existedPeople }
  }
}
function selected(attr, obj) {
  record.value[attr] = obj
  if (obj === null) record.value[attr.replace('_', '')] = null
}
function checkError() {
  existedPeople = undefined
  errors.value = {}
  if ($empty(record.value.fullname)) errors.value.fullname = 'Họ tên không được bỏ trống'

  const errPhone = $errPhone(record.value.phone)
  if (errPhone) errors.value.phone = errPhone
  
  return Object.keys(errors.value).length > 0
}
async function update() {
  if (checkError()) return
  if (!record.value.id) {
    if (record.value.phone) {
      record.value.phone = record.value.phone.trim()
      let obj = await $getdata('people', { phone: record.value.phone }, undefined, true)
      if (obj) {
        existedPeople = obj
        errors.value.phone = 'Số điện thoại đã tồn tại.'
        return
      }
    }
  }
  record.value = $resetNull(record.value)
  if (record.value._province) record.value.province = record.value._province.id
  if (record.value._company) record.value.company = record.value._company.id
  if (record.value._country) record.value.country = record.value._country.id
  if (record.value._sex) record.value.sex = record.value._sex.id
  if (record.value._legal_type) record.value.legal_type = record.value._legal_type.id
  if (record.value._issued_place) record.value.issued_place = record.value._issued_place.id
  if (!record.value.creator) record.value.creator = store.login.id
  record.value.updater = store.login.id
  record.value.updater_time = new Date()
  let rs = record.value.id ? await $updateapi('people', record.value)
    : await $insertapi('people', record.value, undefined, false)
  if (rs === 'error') return
  if (!record.value.id) $snackbar(`Người liên quan đã được khởi tạo với mã <b>${rs.code}</b>`, 'Thành công', 'Success')
  record.value.id = rs.id
  if (record.value.image ? record.value.image.length > 0 : false) {
    let arr = []
    record.image.map(v => arr.push({ ref: record.value.id, file: v }))
    await $insertapi('customerfile', arr, undefined, false)
  }
  let ele = await $getdata('people', { id: rs.id }, undefined, true)
  emit('update', ele)
  emit('modalevent', { name: 'dataevent', data: ele })
  if (props.pagename) $updatepage(props.pagename, ele)
}
initData()
</script>