前端培訓-中級階段（43）- vue 2.x 實戰 CURD

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

前面咱們基本學會了 Vue 的基本使用，那麼今天咱們來嘗試實現一個庫存管理系統，由於沒有學服務端（放後面 express 裏面作接口），咱們暫時就不考慮服務端的實現了，直接存本地。

demo地址：https://www.lilnong.top/static/html/vue-erp-test.html。
demo地址，修改成 vue@2.6.11，支持新的插槽語法：https://www.lilnong.top/static/html/vue-erp-test-vue@2.6.11.html

需求

1. 部門管理
   
2. 人員管理，人員須要和部門關聯。
   

3. 庫存管理，須要關聯人員
   

   1. 能夠補貨
   2. 能夠被領用，須要有領用人和數量
4. 須要有操做記錄
   

需求大概就是這樣，下面說一下咱們的實現方案：

• 由於沒有服務端，因此數據存放在 localStroage 中。

• 基本上就是 table + dialog

  • table 負責展現數據
  • dialog 負責新增修改數據
• 初始化從 localStroage 讀取數據，每次操做完保存 localStroage。

實現

table 列表

代碼以下，咱們來看一下里面都用到了那些東西

• v-if 用來判斷當前應該顯示那個標籤的內容

  • 來個面試題 v-if 和 v-show 區別是什麼？前端培訓-中級階段（35）- Vue 語法 之 Vue 自帶的指令

• v-bind，縮寫爲 :

  • size="mini" 用來傳入了一個字符串，其實等價於 :size="'mini'"

• v-on，縮寫爲 @

  • @click="insertGroup" 用來實現單擊時觸發函數。

• 插槽，用於父組件給子組件傳遞 DOM

  • <el-button>新增部門</el-button>，el-button 是一個組件，內部接收到了一個 <slot name="default"> 的內容。
  • <template slot-scope="scope"> 這裏是一個做用域插槽，DOM 使用父級的，可是做用域使用子級的。固然 slot-scope 被廢棄了，應該用 2.6.0 增長的 v-slot

<div v-if="navIdx == 1">
    <div class="header">部門管理</div>
    <div class="search-box">
        <el-button 
            size="mini" 
            type="primary" 
            @click="insertGroup">新增部門</el-button>
    </div>
    <el-table
    :data="list1"
    style="width: 100%;padding-left: 10px;">
        <el-table-column
            prop="id"
            label="編號"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名稱"
            width="auto">
        </el-table-column>
        <el-table-column
            label="操做"
            width="200">
            <template slot-scope="scope">
                <el-button 
                    size="mini" 
                    type="warning"
                    @click="updateGroup(scope.row)">修改部門信息</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

dialog

代碼以下，咱們來看一下里面都用到了那些東西

• 首先咱們把一個 dialog 的狀態，所有集成到一個 memberInfo 變量中。
  這樣實際上是方便咱們開發的，若是是多個 dialog 的場景，咱們就能夠很方便的分辨出做用域。

• .sync（vue 2.3.0+ 新增） 能夠理解是對組件間數據雙向綁定的一個擴展。以前只能用 v-model 來作（:value 和 @input）。

  • :visible.sync="memberInfo.dialogVisible" 子組件能夠經過 this.$emit('update:visible', newVisible) 來修改父組件的 memberInfo.dialogVisible 的值。

• 插槽

  • 具名插槽 <span slot="footer" class="dialog-footer">，固然 slot 被廢棄了，應該用 2.6.0 增長的 v-slot

<el-dialog
    :title="memberInfo.id?'修改':'新增'"
    :visible.sync="memberInfo.dialogVisible"
    width="30%">
    <div>
        <div>
            <el-input v-model="memberInfo.name" placeholder="人員名稱"></el-input>
        </div>
        <div>
            <el-select v-model="memberInfo.groupid" placeholder="請選擇所屬部門">
                <el-option
                    v-for="item in list1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="memberInfoHandler(0)">取 消</el-button>
        <el-button size="mini" type="primary" @click="memberInfoHandler(1)">確 定</el-button>
    </span>
</el-dialog>

初始化數據&操做以後保存數據

初始化數據

created 時從 localStorage 讀取數據。由於 Storage 只能保存字符串，因此還須要 JSON.parse 一下。

created(){
    this.list1 = JSON.parse(localStorage.getItem('list1')) || []
    this.list2 = JSON.parse(localStorage.getItem('list2')) || []
    this.list3 = JSON.parse(localStorage.getItem('list3')) || []
    this.list4 = JSON.parse(localStorage.getItem('list4')) || []
},

操做&保存數據

groupInfoHandler(type){
    // 0取消 1確認
    console.log('groupInfoHandler', arguments)
    if(!type){

    }else{
        if(this.groupInfo.id){
            var item = this.groupHash[this.groupInfo.id];
            this.saveLog(2, `更新部門：${item.name} => ${this.groupInfo.name}`)
            item.name = this.groupInfo.name
        }else{
            if(this.groupInfo.name.trim().length == ''){
                return this.$message.error("請輸入名稱")
            }
            this.list1.push({
                id:  (this.list1.length+1),
                name: this.groupInfo.name
            })
            this.saveLog(2, `新增部門：${this.groupInfo.name}`)
        }   
        localStorage.setItem('list1',JSON.stringify(this.list1))
    }
    this.groupInfo.dialogVisible = false;
},

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃