qimall/backend/modules/mall/views/app/version-list.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('create-upload', __DIR__);
?>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>App版本列表</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="createUpload()">添加</el-button>
            </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> -->
            <div class="input-item">
                <div flex>
                    <div flex="cross:center" class="input-search">
                        <div class="input-item-name">app类型：</div>
                        <div>
                            <el-select v-model="app_type" clearable placeholder="请选择" size="small">
                                <el-option
                                v-for="(item,index) in appType"
                                :key="index"
                                :label="item"
                                :value="index">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div flex="cross:center" class="input-search" style="margin-left:10px;">
                        <div class="input-item-name"> 状态：</div>
                        <div>
                            <el-select v-model="status" placeholder="请选择" clearable size="small">
                                <el-option label="全部" :value="''"></el-option>
                                <el-option v-for="(item,index) in default_status" :key="index" :label="item" :value="index">{{item}}
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                <div style="margin-left: 90px;margin-top: 0px;">
                    <el-button type="primary" size="small" @click="search">搜索</el-button>
                    <el-button type="warning" @click="clereSearch" v-if="app_type || status" style="padding: 9px 15px !important;">清除搜索条件</el-button>
                </div>
                </div>
            </div>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                <el-table-column label="ID" prop="id" align="center"></el-table-column>
                <el-table-column label="版本号" prop="version" align="center"></el-table-column>
                <el-table-column label="版本号数字" prop="version_num" align="center"></el-table-column>
                <el-table-column label="app类型" prop="app_type" align="center"></el-table-column>
                <el-table-column label="状态" prop="status" align="center">
                    <template slot-scope="scope">
                        <el-tag effect="plain" type="success" v-if="scope.row.status==1">启用</el-tag>
                        <el-tag effect="plain" type="danger" v-if="scope.row.status==0">禁用</el-tag>
                        <el-tag effect="plain" type="warning" v-if="scope.row.status==-1">已删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否强制更新" prop="edition_force" align="center">
                    <template slot-scope="scope">
                        <el-tag effect="plain" v-if="scope.row.edition_force==1">是</el-tag>
                        <el-tag effect="plain" v-if="scope.row.edition_force==0">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="更新类型" prop="package_type" align="center">
                    <template slot-scope="scope">
                        <el-tag effect="plain" v-if="scope.row.package_type==1">wgt升级</el-tag>
                        <el-tag effect="plain" v-if="scope.row.package_type==0">整包升级</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" width="150" prop="created_at" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
                    </template>
                </el-table-column>
                <el-table-column label="修改时间" width="150" prop="updated_at" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.updated_at|dateTimeFormat('Y-m-d H:i:s') }}
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="content" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('enable',scope.row)" v-if="scope.row.status == 0">启用</el-button>
                        <el-button type="text" @click="handle('disable',scope.row)" v-if="scope.row.status == 1">禁用</el-button>
                        <el-button type="text" @click="handle('delete',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>
    <create-upload v-if="dialog.createUpload" ref="createUploadDialog" @success="handleSuccess" :apptype="appType"></create-upload>
    <exec-log v-if="dialog.execLog" ref="execLogDialog"></exec-log>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                dialog: {
                    createUpload: false,
                    execLog: false,
                },
                keyword: '',
                app_type: '',
                status: '',
                list: [{
                    title: "测试标题"
                }],
                default_status:{0 : '禁用', 1 : '启用'},
                appType: [],
                listLoading: false,
                page: 1,
                pageCount: 0
            };
        },
        mounted: function() {
            this.getList();
        },
        methods: {
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            // 获取广告列表
            getList() {
                let self = this;
                let params = {
                    r: 'mall/app/version-list',
                    page: self.page,
                    app_type: self.app_type,
                    status: self.status,
                }
                self.listLoading = true;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        self.list = e.data.data.list;
                        self.appType = e.data.data.type;
                        self.pageCount = e.data.data.page_count;
                        // console.log(self.appType);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.listLoading = false;
                });
            },
            //本地更新数据
            handleSuccess() {
                this.dialog.createUpload = false
                this.getList()
            },
            createUpload() {
                this.dialog.createUpload = true
                this.$nextTick(() => {
                    // console.log(this.$refs)
                    // console.log(this.$refs.createUploadDialog)
                    this.$refs.createUploadDialog.open('show')
                })
            },
            seeExecLog(row){
                this.dialog.execLog = true
                this.$nextTick(() => {
                    console.log(this.$refs)
                    this.$refs.execLogDialog.open(row)
                })
            },
            clereSearch() {
                this.app_type = '';
                this.status = '';
                this.getList();
            },
            search() {
                this.page = 1;
                this.getList();
            },

            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'enable':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('是否启用该app版本?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.doHandle(param)
                        })
                        break;
                    case 'disable':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('是否禁用该app版本?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.doHandle(param)
                        })
                        break;
                    case 'delete':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.doHandle(param)
                        })
                        break;
                     
                }
            },
            doHandle(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/app/do-handle',
                    },
                    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>