system/components/user/EditUser.vue

<template>
  <div v-if="record">
    <div class="columns is-multiline mx-0">
      <div class="column is-4">
        <div class="field">
          <label class="label">{{isVietnamese ? 'Tên tài khoản' : 'Username'}}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input class="input" type="text" placeholder="" v-model="record.username" disabled />
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{isVietnamese ? 'Họ tên' : 'Full 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">{{isVietnamese ? 'Loại tài khoản' : 'Account type'}}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <SearchBox
              v-bind="{
                api: 'usertype',
                field: 'name',
                column: ['name'],
                first: true,
                optionid: record.type,
                disabled: false,
              }"
              @option="selected('_type', $event)"
            ></SearchBox>
          </div>
          <p class="help is-danger" v-if="errors.type">{{ errors.type }}</p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ isVietnamese ? 'Trạng thái' : 'Status' }}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <p class="mt-4">
              <span class="mr-4" v-for="(v, i) in option">
                <a class="icon-text" @click="radioBlocked = v">
                  <SvgIcon
                    v-bind="{
                      name: `radio-${radioBlocked?.code === v.code ? '' : 'un'}checked.svg`,
                      type: 'gray',
                      size: 22,
                    }"
                  ></SvgIcon>
                  <span>{{ v.name }}</span>
                </a>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-5">
      <button class="button is-primary has-text-white" @click="update()">{{isVietnamese ? 'Cập nhật' : 'Update'}}</button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['pagename', 'row'],
  data() {
    return {
      isVietnamese: this.$isVietnamese(),
      errors: {},
      record: this.row ? this.$copy(this.row) : undefined,
      radioBlocked: undefined,
      branch: [],
      check: {},
      branchOpt: undefined,
      option: [
        { code: 0, name: 'Active' },
        { code: 1, name: 'Blocked' },
      ],
    };
  },
  computed: {
    option() {
      return [
        { code: 0, name: this.isVietnamese ? 'Hoạt động' : 'Active' },
        { code: 1, name: this.isVietnamese ? 'Khóa' : 'Blocked' },
      ];
    },
  },

  async created() {
    this.record = await this.$getdata('user', undefined, { filter: { id: this.row.id } }, true);

    this.radioBlocked = this.record.blocked ? this.option[1] : this.option[0];
    console.log(this.radioBlocked);
  },
  methods: {
    selected(attr, obj) {
      this.record[attr] = obj;
    },
    checkError() {
      this.errors = [];
      if (!this.$empty(this.record.fullname)) {
        this.record.fullname = this.record.fullname.trim();
      }
      if (!this.$empty(this.record.username)) {
        this.record.username = this.record.username.trim().toLowerCase();
      }
      if (this.$empty(this.record.fullname)) {
        this.errors.fullname = 'Họ và tên không được bỏ trống';
      } else if (this.record.fullname.length < 5) {
        this.errors.fullname = 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên';
      }
      if (this.$empty(this.record.username)) {
        this.errors.username = 'Tài khoản không được bỏ trống';
      } else if (this.record.username !== this.record.username.replace(' ', '')) {
        this.errors.username = 'Tài khoản không được chứa khoảng trắng';
      } else if (this.record.username.length < 5) {
        this.errors.fullname = 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên';
      }
      if (!(this.record._type || this.record.type)) this.errors.type = 'Chưa chọn loại tài khoản';
      return this.errors.length > 0 ? true : false;
    },
    async update() {
      if (this.checkError()) return;
      if (this.record._type) this.record.type = this.record._type.id;
      this.record.blocked = this.radioBlocked.code;
      let rs = await this.$updaterow('user', this.record, undefined, this.pagename);
      if (this.radioBlocked.code === 1) this.setTokenExpiry();
    },
    doCheck(v) {
      this.$set(this.check, v.code, this.check[v.code] ? false : true);
    },
    async setTokenExpiry() {
      let rows = await this.$getdata('token', { user: this.record.id, expiry: 0 });
      if (rows.length === 0) return;
      rows.map((v) => (v.expiry = 1));
      this.$insertapi('token', rows, undefined, true);
    },
  },
  mounted() {
    console.log('User:', this.radioBlocked);
  },
};
</script>