[开发|前端] vue2 创建关联示例笔记

墨蓝 2024-03-16 22:59 49阅读 0赞

1.  创建

import Application from '@/active-resources/application';
    import User from '@/active-resources/user';
    import {
         Dict } from '@orbit/utils';
    import {
         Component, Vue } from 'vue-property-decorator';
    import NewForm from './form.vue';
    import Validator from './validator';
    
    @Component({
         components: {
         NewForm } })
    export default class EquipmentNewComponent extends Vue {
        
      resource: User = new User({
        
        type: User.TYPE,
        attributes: {
        },
      });
      validator = new Validator();
    
      application!: Application;
    
      async created() {
        
        this.application = await Application.findByRemoteId('1');
      }
    
      async handleSubmitClick(model: Dict<unknown>) {
        
        const user = new User(
          {
         type: User.TYPE, attributes: model },
          {
         application: this.application }
        );
        await user.save({
         url: '/api/v1/applications/1/users' });
    
        this.$store.commit('user/SET_AVATAR');
    
        this.$router.back();
      }
    
      handleCancelClick() {
        
        this.$router.back();
      }
    }

1.  更新

import Department from '@/active-resources/department';
    import DmsAccount from '@/active-resources/dms-account';
    import {
         Dict } from '@orbit/utils';
    import {
         Component, Vue } from 'vue-property-decorator';
    
    @Component({
         components: {
         EditForm } })
    export default class EditComponent extends Vue {
        
      resource: DmsAccount = new DmsAccount();
      resource: DmsAccount = new DmsAccount({
        
        type: DmsAccount.TYPE,
        attributes: {
        },
      });
      validator = new Validator();
    
      async handleSubmitClick(model: Dict<unknown>) {
        
        await this.resource.update({
         attributes: model });
        const attributes = {
        
          username: model.username,
          realname: model.realname,
          nickname: model.nickname,
          avatar: model.avatar,
          blog: model.blog,
          company: model.company,
          location: model.location,
          email: model.email,
          remark: model.remark,
          gender: model.gender,
          roles: model.roles,
        };
    
        if (model.department) {
        
          this.resource.replaceRelatedRecord(
            Department.TYPE,
            new Department(
              Department.keyToId(
                Department.TYPE,
                'remoteId',
                model.department as string
              )
            )
          );
        }
    
        await this.resource.update({
        
          attributes,
        });
    
        this.$router.push({
        
          name: 'user',
        });
      async created() {
        
        const remoteId = this.$route.params.id;
        this.resource = await DmsAccount.findByRemoteId(remoteId, {
        
          include: ['account', 'account.user'],
          include: ['account', 'account.user', 'department', 'department.jctb0103'],
        });
        this.resource = this.resource.account.user;
        const model = this.resource.account.user;
        const attributes = {
        
          username: model.username,
          realname: model.realname,
          nickname: model.nickname,
          avatar: model.avatar,
          blog: model.blog,
          company: model.company,
          location: model.location,
          email: model.email,
          remark: model.remark,
          gender: model.gender,
          roles: model.roles,
        };
        this.resource.attributes = attributes;
        if (this.resource.department) {
        
          Vue.set(
            this.resource.attributes,
            'department',
            this.resource.department.remoteId
          );
          Vue.set(this.resource, 'department', this.resource.department.remoteId);
        }
      }
    }