378 lines
11 KiB
Vue
378 lines
11 KiB
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>
|