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("DD/MM/YYYY") : "/" }}
            </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("DD/MM/YYYY") : "/" }}
            </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>