Ember用户管理CRUD #

// app/models/user.js
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') name;
  @attr('string') email;
  @attr('string') phone;
  @attr('string') role;
  @attr('boolean') isActive;
  @attr('date') createdAt;

  get statusText() {
    return this.isActive ? '活跃' : '禁用';
  }
}

// app/routes/users.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class UsersRoute extends Route {
  @service store;

  model() {
    return this.store.findAll('user');
  }
}

// app/routes/users/new.js
import Route from '@ember/routing/route';

export default class UsersNewRoute extends Route {
  model() {
    return this.store.createRecord('user', {
      isActive: true,
      role: 'user',
    });
  }
}

// app/routes/users/edit.js
import Route from '@ember/routing/route';

export default class UsersEditRoute extends Route {
  model(params) {
    return this.store.findRecord('user', params.user_id);
  }
}

// app/controllers/users.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class UsersController extends Controller {
  @tracked searchTerm = '';
  @tracked filterRole = 'all';

  get filteredUsers() {
    let users = this.model;

    if (this.searchTerm) {
      const term = this.searchTerm.toLowerCase();
      users = users.filter(
        (user) =>
          user.name.toLowerCase().includes(term) ||
          user.email.toLowerCase().includes(term)
      );
    }

    if (this.filterRole !== 'all') {
      users = users.filterBy('role', this.filterRole);
    }

    return users;
  }

  @action
  updateSearch(event) {
    this.searchTerm = event.target.value;
  }

  @action
  setFilter(role) {
    this.filterRole = role;
  }
}

// app/components/user-form.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class UserFormComponent extends Component {
  roles = ['admin', 'user', 'guest'];

  @action
  async submit(event) {
    event.preventDefault();

    if (this.args.onSubmit) {
      await this.args.onSubmit(this.args.user);
    }
  }

  @action
  updateField(field, event) {
    this.args.user[field] = event.target.value;
  }

  @action
  toggleActive() {
    this.args.user.isActive = !this.args.user.isActive;
  }
}