Info
Content

管理后台前端动作审核列表页面功能实现

由 学院君 创建于5年前, 最后更新于 5年前    版本号 #1    9910 views    1 likes    0 collects

在上一篇教程中，我们完成了管理后台前端路由定义，并通过 Vue Router 的路由元信息功能实现了在前端路由中进行权限判断及请求拦截。在这篇教程中我们就要来真正为动作审核列表编写管理后台页面，对列表数据进行渲染并实现对每个审核动作的通过和拒绝操作。

第一步：为后台布局文件 Admin.vue 添加页面头部和导航组件

在开始之前，首先需要填充 resources/assets/js/layouts/Admin.vue 组件，和前台布局文件 Layout.vue 一样，需要在该组件中引入公共的页面头部、导航组件、其他辅助组件和子页面组件。

为此，首先为管理后台创建一个 resources/assets/js/components/admin/AdminHeader.vue 组件用于渲染管理后台头部，该组件用于在页面顶部渲染应用 Logo 和用户登录等元素（在应用前台这些元素是在导航组件中渲染的）：

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    header {
        background-color: #FFFFFF;
        height: 75px;

        z-index: 9999;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        img.logo {
            margin: auto;
            margin-top: 22.5px;
            margin-bottom: 22.5px;
            display: block;
        }

        img.hamburger {
            float: right;
            margin-right: 18px;
            margin-top: 30px;
            cursor: pointer;
        }

        img.avatar {
            float: right;
            margin-right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin-top: 18px;
        }

        &:after {
            content: "";
            display: table;
            clear: both;
        }
    }

    /* Small only */
    @media screen and (max-width: 39.9375em) {
        nav.top-navigation {
            span.login {
                display: none;
            }

            img.hamburger {
                margin-top: 26px;
            }
        }
    }

    /* Medium only */
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {

    }

    /* Large only */
    @media screen and (min-width: 64em) and (max-width: 74.9375em) {

    }
</style>

<template>
    <header class="admin-header">
        <div class="grid-x">
            <div class="large-4 medium-4 small-4 cell">

            </div>
            <div class="large-4 medium-4 small-4 cell">
                <router-link :to="{ name: 'cafes'}">
                    <img src="/storage/img/logo.svg" class="logo"/>
                </router-link>
            </div>
            <div class="large-4 medium-4 small-4 cell">
                <img class="hamburger" src="/storage/img/hamburger.svg" v-on:click="setShowPopOut()"/>
                <img class="avatar" v-if="user !== '' && userLoadStatus === 2" :src="user.avatar"
                     v-show="userLoadStatus === 2"/>
                <span class="login" v-if="user === ''" v-on:click="login()">登录</span>
            </div>
        </div>
    </header>
</template>

<script>
    export default {
        computed: {
            userLoadStatus() {
                return this.$store.getters.getUserLoadStatus();
            },

            user() {
                return this.$store.getters.getUser;
            }
        },

        methods: {
            setShowPopOut() {
                this.$store.dispatch('toggleShowPopOut', {showPopOut: true});
            }
        }
    }
</script>

然后创建管理后台导航组件 resources/assets/js/components/admin/Navigation.vue 用于渲染类似页面面包屑导航之类的元素：

<style lang="scss">
  @import '~@/abstracts/_variables.scss';

  nav.admin-navigation{
    div.admin-link{
      font-size: 16px;
      font-weight: bold;
      font-family: "Lato", sans-serif;
      text-transform: uppercase;
      padding-top: 15px;
      padding-bottom: 15px;

      a{
        color: black;

        &.router-link-active{
          color: $secondary-color;
        }
      }
    }
  }
</style>

<template>
  <nav class="admin-navigation">
    <div class="admin-link">
      <router-link :to="{ name: 'admin-actions' }">
        动作审核列表
      </router-link>
    </div>
  </nav>
</template>

<script>
  export default {

  }
</script>

最后，打开布局文件 resources/assets/js/layouts/Admin.vue，编写代码如下：

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div#admin-layout {
        div#page-container {
            margin-top: 75px;
        }
    }
</style>

<template>
    <div id="admin-layout">
        <admin-header></admin-header>

        <success-notification></success-notification>
        <error-notification></error-notification>

        <div class="grid-container" id="page-container">
            <div class="grid-x grid-padding-x">
                <div class="large-3 medium-4 cell">
                    <navigation></navigation>
                </div>
                <div class="large-9 medium-8 cell">
                    <router-view></router-view>
                </div>
            </div>
        </div>

        <pop-out></pop-out>
    </div>
</template>

<script>
    import SuccessNotification from '../components/global/SuccessNotification.vue';
    import ErrorNotification from '../components/global/ErrorNotification.vue';

    import AdminHeader from '../components/admin/AdminHeader.vue';
    import Navigation from '../components/admin/Navigation.vue';
    import PopOut from '../components/global/PopOut.vue';

    export default {
        components: {
            SuccessNotification,
            ErrorNotification,
            AdminHeader,
            Navigation,
            PopOut
        },

        created() {
            this.$store.dispatch('loadBrewMethods');
        },

        computed: {
            user() {
                return this.$store.getters.getUser;
            }
        }
    }
</script>

在这个布局文件中，我们引入了刚刚创建的后台头部组件、导航组件，以及和前台共用消息通知组件、滑出菜单组件，子页面组件还是通过内置的 router-view 引入，下面我们就要来创建用于渲染动作审核列表的子页面组件。

第二步：为动作审核子页面定义前端路由、API 调用和 Vuex 模块

接下来我们在前端路由文件 resources/assets/js/routes.js 中定义动作审核子页面路由，改写之前的 admin 路由定义如下： 

{
   path: '/admin',
   name: 'admin',
   component: Vue.component('Admin', require('./layouts/Admin.vue')),
   beforeEnter: requireAuth,
   meta: {
       permission: 'owner'
   },
   children: [
       {
           path: 'actions',
           name: 'admin-actions',
           component: Vue.component('AdminActions', require('./pages/admin/Actions.vue')),
           meta: {
               permission: 'owner'
           }
       },
       {
           path: '_=_',
           redirect: '/'
       }
   ]
}

创建一个空的子页面组件 resources/assets/js/pages/admin/Actions.vue，具体代码稍后编写，我们先创建一个新的 API 调用文件 resources/assets/js/api/admin/actions.js，并在其中定义对动作审核相关后台 API 的请求：

/*
  Imports the Roast API URL from the config.
*/
import {ROAST_CONFIG} from '../../config.js';

export default {
    /*
      GET   /api/v1/admin/actions
    */
    getActions: function () {
        return axios.get(ROAST_CONFIG.API_URL + '/admin/actions');
    },

    /*
      PUT   /admin/v1/admin/actions/{action}/approve
    */
    putApproveAction: function (id) {
        return axios.put(ROAST_CONFIG.API_URL + '/admin/actions/' + id + '/approve');
    },

    /*
      PUT   /admin/v1/admin/actions/{action}/deny
    */
    putDenyAction: function (id) {
        return axios.put(ROAST_CONFIG.API_URL + '/admin/actions/' + id + '/deny');
    }
}

然后为审核动作创建一个新的 Vuex 模块 resources/assets/js/modules/admin/actions.js，编写模块代码如下：

/*
|-------------------------------------------------------------------------------
| VUEX modules/admin/actions.js
|-------------------------------------------------------------------------------
| The Vuex data store for the admin actions
*/
import ActionsAPI from '../../api/admin/actions.js';

export const actions = {
    /*
      Defines the state being monitored for the module.
    */
    state: {
        actions: [],
        actionsLoadStatus: 0,

        actionApproveStatus: 0,
        actionDeniedStatus: 0
    },

    actions: {
        loadAdminActions({commit}) {
            commit('setActionsLoadStatus', 1);

            ActionsAPI.getActions()
                .then(function (response) {
                    commit('setActions', response.data);
                    commit('setActionsLoadStatus', 2);
                })
                .catch(function () {
                    commit('setActions', []);
                    commit('setActionsLoadStatus', 3);
                });
        },

        approveAction({commit, state, dispatch}, data) {
            commit('setActionApproveStatus', 1);

            ActionsAPI.putApproveAction(data.id)
                .then(function (response) {
                    commit('setActionApproveStatus', 2);
                    dispatch('loadAdminActions');
                })
                .catch(function () {
                    commit('setActionApproveStatus', 3);
                });

        },

        denyAction({commit, state, dispatch}, data) {
            commit('setActionDeniedStatus', 1);

            ActionsAPI.putDenyAction(data.id)
                .then(function (response) {
                    commit('setActionDeniedStatus', 2);
                    dispatch('loadAdminActions');
                })
                .catch(function () {
                    commit('setActionDeniedStatus', 3);
                });

        }
    },

    mutations: {
        setActionsLoadStatus(state, status) {
            state.actionsLoadStatus = status;
        },

        setActions(state, actions) {
            state.actions = actions;
        },

        setActionApproveStatus(state, status) {
            state.actionApproveStatus = status;
        },

        setActionDeniedStatus(state, status) {
            state.actionDeniedStatus = status;
        }
    },

    getters: {
        getActions(state) {
            return state.actions;
        },

        getActionsLoadStatus(state) {
            return state.actionsLoadStatus;
        },

        getActionApproveStatus(state) {
            return state.actionApproveStatus;
        },

        getActionDeniedStatus(state) {
            return state.actionDeniedStatus;
        }
    }
};

第三步：实现动作审核列表子页面组件

最后，我们编写动作审核列表子页面组件 resources/assets/js/pages/admin/Actions.vue 代码如下：

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div#admin-actions {
        div.actions-header {
            font-family: "Lato", sans-serif;
            border-bottom: 1px solid black;
            font-weight: bold;
            padding-bottom: 10px;
        }

        div.no-actions-available {
            text-align: center;
            font-family: "Lato", sans-serif;
            font-size: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    }
</style>

<template>
    <div id="admin-actions">
        <div class="grid-container">
            <div class="grid-x">
                <div class="large-12 medium-12 cell">
                    <h3 class="page-header">Actions</h3>
                </div>
            </div>
        </div>

        <div class="grid-container">
            <div class="grid-x actions-header">
                <div class="large-3 medium-3 cell">
                    公司
                </div>
                <div class="large-3 medium-3 cell">
                    咖啡店
                </div>
                <div class="large-3 medium-3 cell">
                    类型
                </div>
                <div class="large-3 medium-3 cell">
                    操作
                </div>
            </div>
            <action v-for="action in actions"
                    :key="action.id"
                    :action="action">
            </action>
            <div class="large-12 medium-12 cell no-actions-available" v-show="actions.length == 0">
                All outstanding actions have been processed!
            </div>
        </div>
    </div>
</template>

<script>
    import Action from '../../components/admin/actions/Action.vue';

    export default {
        components: {
            Action
        },

        created() {
            this.$store.dispatch('loadAdminActions');
        },

        computed: {
            actions() {
                return this.$store.getters.getActions;
            }
        }
    }
</script>

这个组件主要用于渲染待审核动作列表，对于每个具体的待审核动作，通过创建一个新的 resources/assets/js/components/admin/actions/Action.vue 组件来渲染：

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div.action {
        font-family: "Lato", sans-serif;
        border-bottom: 1px solid black;
        padding-bottom: 15px;
        padding-top: 15px;

        span.approve-action {
            font-weight: bold;
            cursor: pointer;
            display: inline-block;
            margin-right: 20px;
        }

        span.deny-action {
            color: $secondary-color;
            font-weight: bold;
            cursor: pointer;
            display: inline-block;
        }

        img.more-info {
            cursor: pointer;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }
    }
</style>

<template>
    <div class="action">
        <div class="grid-x">
            <div class="large-3 medium-3 cell">
                {{ action.company != null ? action.company.name : '' }}
            </div>
            <div class="large-3 medium-3 cell">
                {{ action.cafe != null ? action.cafe.location_name : '' }}
            </div>
            <div class="large-3 medium-3 cell">
                {{ type }}
            </div>
            <div class="large-3 medium-3 cell">
                <span class="approve-action" v-on:click="approveAction()">通过</span>
                <span class="deny-action" v-on:click="denyAction()">拒绝</span>
                <span v-on:click="showDetails = !showDetails">
                    <img src="/storage/img/more-info-closed.svg" class="more-info" v-show="!showDetails"/>
                    <img src="/storage/img/more-info-open.svg" class="more-info" v-show="showDetails"/>
                </span>
            </div>
        </div>
        <div class="grid-x" v-show="showDetails">
            <div class="large-12 medium-12 cell">
                <action-cafe-added v-if="action.type == 'cafe-added'" :action="action"></action-cafe-added>
                <action-cafe-edited v-if="action.type == 'cafe-updated'" :action="action"></action-cafe-edited>
                <action-cafe-deleted v-if="action.type == 'cafe-deleted'" :action="action"></action-cafe-deleted>
            </div>
        </div>
    </div>
</template>

<script>
    import ActionCafeAdded from './ActionCafeAdded.vue';
    import ActionCafeEdited from './ActionCafeEdited.vue';
    import ActionCafeDeleted from './ActionCafeDeleted.vue';

    import {EventBus} from '../../../event-bus.js';

    export default {
        props: ['action'],

        components: {
            ActionCafeAdded,
            ActionCafeEdited,
            ActionCafeDeleted
        },

        data() {
            return {
                showDetails: false
            }
        },

        computed: {
            type() {
                switch (this.action.type) {
                    case 'cafe-added':
                        return '添加咖啡店';
                        break;
                    case 'cafe-updated':
                        return '更新咖啡店';
                        break;
                    case 'cafe-deleted':
                        return '删除咖啡店';
                        break;
                }
            },

            actionApproveStatus() {
                return this.$store.getters.getActionApproveStatus;
            },

            actionDeniedStatus() {
                return this.$store.getters.getActionDeniedStatus;
            }
        },

        watch: {
            'actionApprovedStatus': function () {
                if (this.actionApproveStatus == 2) {
                    EventBus.$emit('show-success', {
                        notification: 'Action approved successfully!'
                    });
                }
            },

            'actionDeniedStatus': function () {
                if (this.actionDeniedStatus == 2) {
                    EventBus.$emit('show-success', {
                        notification: 'Action denied successfully!'
                    });
                }
            }
        },

        methods: {
            approveAction() {
                this.$store.dispatch('approveAction', {
                    id: this.action.id
                });
            },

            denyAction() {
                this.$store.dispatch('denyAction', {
                    id: this.action.id
                });
            }
        }
    }
</script>

在这个组件中，主要渲染每个待审核动作的具体字段信息以及通过、拒绝按钮及对应点击触发方法，然后还有一个显示操作明细数据的组件，我们根据条件渲染来显示它们，比如新增咖啡店显示新增咖啡店数据，修改咖啡店显示修改咖啡店数据，删除咖啡店显示删除咖啡店数据，这些数据的显示我们也分割到不同的子组件中去实现了，分别是新增数据显示组件 resources/assets/js/components/admin/actions/ActionCafeAdded.vue：

<style lang="scss">
    @import '~@/abstracts/_variables.scss';
</style>

<template>
    <div class="action-cafe-added action-cafe-detail">
        <div class="grid-x grid-padding-x">
            <div class="large-6 medium-6 cell">
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>公司名称</label>
                        <span class="action-content">{{ content.company_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>网站</label>
                        <span class="action-content">{{ content.website }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>位置名称</label>
                        <span class="action-content">{{ content.location_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>街道地址</label>
                        <span class="action-content">{{ content.address }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>城市</label>
                        <span class="action-content">{{ content.city }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>省份</label>
                        <span class="action-content">{{ content.state }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>邮编</label>
                        <span class="action-content">{{ content.zip }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>冲泡方法</label>
                        <div class="brew-method option" v-for="method in actionBrewMethods">
                            <div class="option-container">
                                <img v-bind:src="method.icon" class="option-icon"/> <span class="option-name">{{ method.method }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="content.tea == 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>茶包</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/tea-bag.svg'" class="option-icon"/> <span
                                    class="option-name">茶包</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="content.matcha == 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>抹茶</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/matcha-latte.svg'" class="option-icon"/> <span
                                    class="option-name">抹茶</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="large-12 medium-12 cell">
                <span class="action-information">Cafe Added by {{ action.by.name }} on {{ action.created_at }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['action'],

        data() {
            return {
                content: ''
            }
        },

        created() {
            this.content = JSON.parse(this.action.content);
        },

        computed: {

            brewMethods() {
                return this.$store.getters.getBrewMethods;
            },

            actionBrewMethods() {
                let actionBrewMethods = [];

                let contentBrewMethods = JSON.parse(this.content.brew_methods);

                for (let i = 0; i < contentBrewMethods.length; i++) {
                    for (let k = 0; k < this.brewMethods.length; k++) {
                        if (parseInt(contentBrewMethods[i]) === parseInt(this.brewMethods[k].id)) {
                            actionBrewMethods.push(this.brewMethods[k]);
                        }
                    }
                }

                return actionBrewMethods;
            }
        }
    }
</script>

编辑数据显示组件 resources/assets/js/components/admin/actions/ActionCafeEdited.vue：

<style lang="scss">
    div.action-cafe-edited {
        span.change {
            color: red;
        }
    }
</style>

<template>
    <div class="action-cafe-edited action-cafe-detail">
        <div class="grid-x grid-padding-x">
            <div class="large-6 medium-6 cell">
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <span class="action-detail-header">当前数据</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>公司名称</label>
                        <span class="action-content">{{ action.company.name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>网站</label>
                        <span class="action-content">{{ action.company.website }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>位置名称</label>
                        <span class="action-content">{{ action.cafe.location_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>街道地址</label>
                        <span class="action-content">{{ action.cafe.address }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>城市</label>
                        <span class="action-content">{{ action.cafe.city }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>省份</label>
                        <span class="action-content">{{ action.cafe.state }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>邮编</label>
                        <span class="action-content">{{ action.cafe.zip }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>冲泡方法</label>
                        <div class="brew-method option" v-for="method in action.cafe.brew_methods">
                            <div class="option-container">
                                <img v-bind:src="method.icon" class="option-icon"/> <span class="option-name">{{ method.method }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="action.cafe.tea === 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>茶包</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/tea-bag.svg'" class="option-icon"/> <span
                                    class="option-name">茶包</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="action.cafe.matcha === 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>抹茶</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/matcha-latte.svg'" class="option-icon"/> <span
                                    class="option-name">抹茶</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="large-6 medium-6 cell">
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <span class="action-detail-header">更新后数据</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>公司名称</label>
                        <span class="action-content"
                              v-bind:class="{'change': content.after.company_name !== action.company.name }">{{ content.after.company_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>网站</label>
                        <span class="action-content"
                              v-bind:class="{'change': content.after.website !== action.company.website }">{{ content.after.website }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>位置名称</label>
                        <span class="action-content"
                              v-bind:class="{'change': content.after.location_name !== action.cafe.location_name }">{{ content.after.location_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>街道地址</label>
                        <span class="action-content"
                              v-bind:class="{'change': content.after.address !== action.cafe.address }">{{ content.after.address }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>城市</label>
                        <span class="action-content"
                              v-bind:class="{'change': content.after.city !== action.cafe.city }">{{ content.after.city }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>省份</label>
                        <span class="action-content"
                              v-bind:class="{'change': content.after.state !== action.cafe.state }">{{ content.after.state }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>邮编</label>
                        <span class="action-content" v-bind:class="{'change': content.after.zip !== action.cafe.zip }">{{ content.after.zip }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>冲泡方法</label>
                        <div class="brew-method option" v-for="method in actionBrewMethods">
                            <div class="option-container">
                                <img v-bind:src="method.icon" class="option-icon"/> <span class="option-name">{{ method.method }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="content.after.tea === 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>茶包</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/icons/tea-bag.svg'" class="option-icon"/> <span
                                    class="option-name">茶包</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="content.after.matcha === 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>抹茶</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/icons/matcha-latte.svg'" class="option-icon"/> <span
                                    class="option-name">抹茶</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="large-12 medium-12 cell">
                <span class="action-information">Cafe Updated by {{ action.by.name }} on {{ action.created_at }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['action'],

        data() {
            return {
                content: ''
            }
        },

        created() {
            this.content = JSON.parse(this.action.content);
        },

        computed: {

            brewMethods() {
                return this.$store.getters.getBrewMethods;
            },

            actionBrewMethods() {
                let actionBrewMethods = [];
                let contentBrewMethods = JSON.parse(this.content.after.brew_methods);

                for (let i = 0; i < contentBrewMethods.length; i++) {
                    for (let k = 0; k < this.brewMethods.length; k++) {
                        if (parseInt(contentBrewMethods[i]) === parseInt(this.brewMethods[k].id)) {
                            actionBrewMethods.push(this.brewMethods[k]);
                        }
                    }
                }

                return actionBrewMethods;
            }
        }
    }
</script>

和删除数据显示组件 resources/assets/js/components/admin/actions/ActionCafeDeleted.vue：

<style>

</style>

<template>
    <div class="action-cafe-deleted action-cafe-detail">
        <div class="grid-x grid-padding-x">
            <div class="large-6 medium-6 cell">
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>公司名称</label>
                        <span class="action-content">{{ action.cafe.company_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>网站</label>
                        <span class="action-content">{{ action.cafe.website }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>位置名称</label>
                        <span class="action-content">{{ action.cafe.location_name }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>街道地址</label>
                        <span class="action-content">{{ action.cafe.address }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>城市</label>
                        <span class="action-content">{{ action.cafe.city }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>省份</label>
                        <span class="action-content">{{ action.cafe.state }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>邮编</label>
                        <span class="action-content">{{ action.cafe.zip }}</span>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>冲泡方法</label>
                        <div class="brew-method option" v-for="method in action.cafe.brew_methods">
                            <div class="option-container">
                                <img v-bind:src="method.icon" class="option-icon"/> <span class="option-name">{{ method.method }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="action.cafe.tea === 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>茶包</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/tea-bag.svg'" class="option-icon"/> <span
                                    class="option-name">茶包</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-x" v-if="action.cafe.matcha === 1">
                    <div class="large-12 medium-12 small-12 cell">
                        <label>抹茶</label>
                        <div class="drink-option option">
                            <div class="option-container">
                                <img v-bind:src="'/storage/img/matcha-latte.svg'" class="option-icon"/> <span
                                    class="option-name">抹茶</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="large-12 medium-12 cell">
                <span class="action-information">Cafe Deleted by {{ action.by.name }} on {{ action.created_at }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['action'],

        data() {
            return {
                content: ''
            }
        },

        created() {
            this.content = JSON.parse(this.action.content);
        }
    }
</script>

创建完这些组件后，在 Action.vue 中引入它们。至此，我们的动作审核子页面组件全部代码就编写完成了，接下来，只需要将对应的 Vuex 模块引入就大功告成了。

第四步：动态引入动作审核 Vuex 模块

你可能已经注意到我们在创建完 resources/assets/js/modules/admin/actions.js 模块后，并没有像在之前用户前台代码里所做的那样立刻在 resources/assets/js/store.js 引入它们，这是因为只有管理员才能登录到管理后台，对于游客、普通用户和商家用户而言，根本无需加载这些资源，我们甚至可以在用户需要这些 Vuex 模块的时候加载它们，不需要的时候卸载它们（比如退出登录），这也是 Vuex 模块的强大之处，接下来，我们将通过动态加载的方式来引入 Actions Vuex 模块。

首先，回到后台布局文件 resources/assets/js/layouts/Admin.vue，在 created 钩子中编写代码如下：

// 引入后台 Vuex 模块
import {actions} from '../modules/admin/actions.js';

created() {
   this.$store.dispatch('loadBrewMethods');

   if (!this.$store._modules.get(['admin'])) {
       this.$store.registerModule('admin', {});
   }

   if (!this.$store._modules.get(['admin', 'actions'])) {
       this.$store.registerModule(['admin', 'actions'], actions);
   }
},

在这段代码中，我们首先查看 admin 模块是否已经注册，如果没有注册话则注册它，它是其他后台模块的父模块，然后我们检查在 admin 父模块中是否存在 actions 子模块，如果没有的话，则将其注册到 admin 模块中，这也就是我们的动作审核 Vuex 模块，这个是按照模块路径来依次注册的，registerModule 方法用于动态注册 Vuex 模块，该方法第一个参数是一个字符串或数组，第二个参数是要引入的 Vuex 模块。这段代码整体的意思就是用户进入管理后台后才会引入动作审核 Vuex 模块（admin.actions)。

接下来，打开前台布局文件 resources/assets/js/layouts/Layout.vue，我们要在这个组件中卸载所有 admin.* Vuex 模块，这样，当管理员退出的时候，就可以从系统中卸载 admin 相关模块，还是在 created 钩子中新增一段卸载 Vuex 模块代码如下：

created() {
   this.$store.dispatch('loadCafes');
   this.$store.dispatch('loadUser');
   this.$store.dispatch('loadBrewMethods');
   this.$store.dispatch('loadCities');
   if (this.$store._modules.get(['admin'])) {
       this.$store.unregisterModule('admin', {});
   }
},

我们会先判断 $store 模块中是否存在 admin 父模块，如果存在，则通过 unregisterModule 方法将其卸载，这样也会连带将 admin 模块下的所有子模块一起卸载。

至此，我们的管理后台动作审核列表前端 UI 功能开发工作算是全部完成了，在演示功能之前，还要做少许优化，打开滑出菜单组件 resources/assets/js/components/global/PopOut.vue，加入管理后台入口（只有管理员可见）：

<div class="side-bar-link" v-if="user != '' && userLoadStatus === 2 && user.permission >= 1">
    <router-link :to="{ name: 'admin'}" v-on:click.native="hideNav()">
        管理后台
    </router-link>
</div>

然后为新增的管理后台头部组件添加一些样式代码，在 resources/assets/sass/components/admin 目录下创建 _page-header.scss，编写 Sass 代码如下：

h3.page-header {
  font-weight: bold;
  font-family: "Lato", sans-serif;
  margin-bottom: 30px;
  font-size: 20px;

  a {
    color: black;
  }
}

最后在 resources/assets/sass/app.scss 中引入上述 Sass 文件：

@import "components/admin/page-header";

接下来，就可以演示管理后台动作审核列表功能了，运行 npm run dev 重新编译前端资源，打开 Roast 应用首页并登录，此时由于用户还是普通用户，没有管理员权限，所以点击右上角滑出菜单是看不到「管理后台」的入口链接的，我们去数据库修改下 users 表对应用户的 permission 字段值为 2，然后刷新页面就可以看到这个入口了：

接下来我们进入管理后台，点击「审核列表」进入动作审核页面 http://roast.test/#/admin/actions，如果没有待审核记录，页面显示如下：

如果有待审核记录，就会显示出动作审核列表：

点击每条记录右侧的下拉箭头就可以看到对应的数据明细：

点击通过/拒绝，则会执行通过或拒绝审核动作，操作成功会弹出提示：

Laravel
API
Vue
Roast
Vuex
动态加载
管理后台
权限
审核
列表
布局
组件
点赞 取消点赞 收藏 取消收藏

<< 上一篇: 通过 Vue Router 提供的路由元信息功能实现前端路由权限判断

>> 下一篇: 在管理后台添加公司、咖啡店、城市、用户、冲泡方法管理功能

无评论
登录后即可添加评论