昔有朝歌夜弦之高樓，上有傾城傾國(guó)之舞袖。

在此附上我的QQ: 2489757828 有問(wèn)題的話可以一同探討
我的github: 李大玄
我的私人博客: 李大玄
我的簡(jiǎn)書(shū): 李大玄
我的CSDN: 李大玄
Example

產(chǎn)品提了一個(gè)需求，在系統(tǒng)中添加一個(gè)用戶功能模塊，需要實(shí)現(xiàn)添加、修改、查看功能

從設(shè)計(jì)圖中看到的 ui 情況是創(chuàng)建與修改界面完全相同，區(qū)別在于修改時(shí)有表單中有默認(rèn)的數(shù)據(jù), 查看與編輯頁(yè)面布局上差不多，區(qū)別是只讀，沒(méi)有保存按鈕

在這里插入圖片描述

目錄結(jié)構(gòu)

user
|- common.vue
|- create.js
|- edit.js
|- check.vue

創(chuàng)建用戶

把創(chuàng)建與編輯的公共部分寫(xiě)到一個(gè)父類(lèi)中，在父類(lèi)中定義好兩邊都需要的方法或者屬性
common.vue

<template>
  <div style="width: 500px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="年齡">
        <el-input v-model="form.age"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
/**
 * @description 創(chuàng)建與編輯的公共邏輯
 */
export default  {
  data () {
    return {
      form: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    // 保存
    onSubmit() {
    },
    // 取消
    onCancel() {
    }
  }
}
</script>

create.js

/**
 * @file 創(chuàng)建用戶
 * @author xxx
 */

// 引入基礎(chǔ)模塊
import Common from './common'

export default  {
  name: 'CreateUser',
  // 繼承
  extends: Common,
  methods: {
    // 重寫(xiě)保存方法
    onSubmit() {
      // 在此處開(kāi)發(fā)創(chuàng)建用戶的業(yè)務(wù)邏輯
      console.log(this.$data.form)
    }
  }
}

編輯用戶

編輯與創(chuàng)建很相似，代碼也比較雷同，區(qū)別在于加載組件時(shí)需要從API中獲取用戶詳情數(shù)據(jù), 保存時(shí)與調(diào)用編輯用戶API 接口

edit.js

/**
 * @file 編輯用戶
 * @author xxx
 */

// 引入基礎(chǔ)模塊
import Common from './common'

export default {
  name: 'EditUser',
  // 繼承
  extends: Common,
  created() {
    this.getUserDetails();
  },
  methods: {
    /** 獲取用戶詳情數(shù)據(jù) */
    async getUserDetails() {
      const user = {
        name: '張三',
        age: 20
      }
      setTimeout(() => {
        this.$data.form = user;
      });
    },
    // 重寫(xiě)保存方法
    onSubmit() {
      // 在此處開(kāi)發(fā)編輯用戶的業(yè)務(wù)邏輯
    }
  }
}

查看用戶

上面介紹過(guò)，查看用戶與編輯用戶的功能有重合的部分，從用戶角度分析區(qū)別是 ui 的布局, 這里我們?cè)陂_(kāi)發(fā)是則不在繼承 common 模塊，繼承 edit 模塊，重寫(xiě) ui 部分

check.vue

<template>
  <div style="width: 500px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <span>{{ form.name }}</span>
      </el-form-item>
      
      <el-form-item label="年齡">
        <span>{{ form.age }}</span>
      </el-form-item>
      
      <el-form-item>
        <el-button @click="onCancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import EditUser from './edit';
export default {
  name: 'CheckUser',
  // 繼承
  extends: EditUser,
}
</script>