web/app/components/people/PeopleView.vue

<template>
  <div
    :id="docid"
    v-if="record"
  >
    <div>
      <Caption
        v-bind="{
          title: store.lang === 'en' ? 'Information' : 'Thông tin',
          type: 'has-text-primary',
        }"
      ></Caption>
      <div class="columns is-multiline mx-0">
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Mã</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="$copyToClipboard(record.code)"
                >{{ record.code }}</span
              >
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Họ tên</label>
            <div class="control">{{ record.fullname }}</div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Điện thoại</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="openPhone()"
                >{{ record.phone }}</span
              >
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Email</label>
            <div
              class="control"
              style="word-break: break-all"
            >
              {{ record.email || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("country") }}</label>
            <div class="control">
              {{ record.country__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Địa chỉ thường trú</label>
            <div class="control">
              {{ record.address || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Địa chỉ liên hệ</label>
            <div class="control">
              {{ record.contact_address || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("dob") }}</label>
            <div class="control">
              {{ record.dob ? $dayjs(record.dob).format("L") : "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("gender") }}</label>
            <div class="control">
              {{ record.sex__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("personal_id") }}</label>
            <div class="control">
              {{ record.legal_type__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("idnum") }}</label>
            <div class="control">
              {{ record.legal_code || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("issued_date") }}</label>
            <div class="control">
              {{ record.issued_date ? $dayjs(record.issued_date).format("L") : "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("issued_place") }}</label>
            <div class="control">
              {{ record.issued_place__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">{{ findLang("update") }}</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="openUser()"
              >
                {{ record.updater__fullname }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Caption
      class="mt-5"
      v-bind="{
        title: store.lang === 'en' ? 'Images' : 'Hình ảnh',
        type: 'has-text-primary',
      }"
    ></Caption>
    <ImageGallery v-bind="{ row: record, api: 'peoplefile', hideopt: true }"></ImageGallery>
    <div
      class="mt-2 border-bottom"
      id="ignore"
    ></div>
    <div
      class="buttons mt-3"
      id="ignore"
    >
      <button
        v-if="$getEditRights('edit', { code: 'customer', category: 'topmenu' })"
        class="button is-primary has-text-white"
        @click="edit()"
      >
        Chỉnh sửa
      </button>
      <button
        class="button is-light has-text-black"
        @click="$exportpdf(docid, record.code)"
      >
        {{ findLang("print") }}
      </button>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      @dataevent="changeInfo"
      v-if="showmodal"
    ></Modal>
  </div>
</template>
<script>
import { useStore } from "~/stores/index";
export default {
  setup() {
    const store = useStore();
    return { store };
  },
  props: ["row", "pagename", "noheader"],
  data() {
    return {
      record: undefined,
      errors: {},
      showmodal: undefined,
      docid: this.$id(),
    };
  },
  async created() {
    this.record = await this.$getdata("people", { id: this.row.people || this.row.id }, undefined, true);
  },
  methods: {
    findLang(code) {
      let found = this.$find(this.store.common, { code: code });
      return found ? found[this.store.lang] : "";
    },
    copy(value) {
      this.$copyToClipboard(value);
      this.$snackbar("Đã copy vào clipboard.", "Copy", "Success");
    },
    openPhone() {
      this.showmodal = {
        title: this.findLang("phone"),
        height: "180px",
        width: "400px",
        component: "common/Phone",
        vbind: { row: this.row, pagename: this.pagename },
      };
    },
    selected(attr, obj) {
      this.record[attr] = obj;
    },
    edit() {
      this.showmodal = {
        component: "people/People",
        title: "Chỉnh sửa người liên quan",
        width: "65%",
        height: "400px",
        vbind: { row: this.record },
      };
    },
    changeInfo(v) {
      this.record = this.$copy(v);
    },
    openUser() {},
  },
};
</script>