qimall/backend/modules/mall/views/goods/service.php

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
    }
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>服务列表</span>
                <div style="float: right;margin-top: -5px">
                    <el-button type="primary" @click="edit" size="small">添加服务</el-button>
                </div>
            </div>
        </div>
        <div class="table-body">
            <el-form :inline="true" size="small" class="demo-form-inline">
                <el-form-item>
                    <el-input @keyup.enter.native="search" size="small" placeholder="请输入搜索内容" v-model="keyword" clearable @clear="getList">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="100">
                </el-table-column>
                <el-table-column label="服务名称" width="350px">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1">{{scope.row.name}}</com-ellipsis>
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1">{{scope.row.remark}}</com-ellipsis>
                    </template>
                </el-table-column>
                <el-table-column label="是否默认" width="100">
                    <template slot-scope="scope">
                        <el-switch @change="operate('default',scope.row)" v-model="scope.row.is_default" :active-value="1" :inactive-value="0" active-color="#3399ff">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="150">
                    <template slot-scope="scope">
                        <div v-if="id != scope.row.id">
                            <el-tooltip class="item" effect="dark" content="排序" placement="top">
                                <span>{{scope.row.sort}}</span>
                            </el-tooltip>
                            <el-button class="edit-sort" type="text" @click="editSort(scope.row)">
                                <img src="resources/img/mall/order/edit.png" alt="">
                            </el-button>
                        </div>
                        <div style="display: flex;align-items: center" v-else>
                            <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="sort" autocomplete="off"></el-input>
                            <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="quit()"></el-button>
                            <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="operate('sort',scope.row)">
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" width="220" label="添加日期">
                    <template slot-scope="scope">
                        <div>{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
                        <el-button type="text" @click="operate('destroy',scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                listLoading: false,
                page: 1,
                keyword: '',
                pageCount: 0,
                sort: 0,
                id: null,
            };
        },
        mounted: function() {
            this.getList();
        },
        methods: {
            search(){
                this.page = 1;
                this.getList();
            },
            editSort(row) {
                this.id = row.id;
                this.sort = row.sort;
            },

            quit() {
                this.id = null;
            },


            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList() {
                let self = this;
                self.listLoading = true;
                let keyword = this.keyword;
                let params = {
                    r: 'mall/goods/service',
                    page: self.page
                }
                if (keyword) params = Object.assign(params, {
                    keyword: keyword
                });
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        self.list = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.listLoading = false;
                });
            },
            // 跳转编辑页
            edit(id) {
                id = parseInt(id);
                let params = {
                    r: 'mall/goods/service-edit'
                };
                if (id) params = Object.assign(params, {
                    id: id
                });
                navigateTo(params);
            },
            operate(type, data = null) {
                let param = {};
                switch (type) {
                    case 'sort':
                        param = {
                            id: this.id,
                            sort: this.sort,
                            type
                        };
                        this.send(param);
                        break;
                    case 'default':
                        param = {
                            id: data.id,
                            is_default: data.is_default,
                            type
                        };
                        this.send(param);
                        break;
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        })
                        break;
                }
            },
            send(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/service',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            }
        }
    });
</script>