qimall/backend/modules/mall/views/mini-program/task.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('create-upload', __DIR__);
ComponentHelper::loadComponentView('exec-log', __DIR__);

?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
        ref="table"
        :api="api"
    >
        <el-table-column label="ID" prop="id" align="center"></el-table-column>
        <el-table-column label="App Id" prop="app_id" align="center"></el-table-column>
        <el-table-column label="版本号" prop="version" align="center"></el-table-column>
        <el-table-column label="商城签名" prop="mall_sign" align="center"></el-table-column>
        <el-table-column label="api域名" prop="api_domain" align="center"></el-table-column>
        <el-table-column label="资源域名" prop="static_domain" align="center"></el-table-column>
        <el-table-column label="是否发布" :render-header="isReviewLabel" prop="is_review" align="center">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.is_review" 
                    :active-value="1" 
                    :inactive-value="0"
                    @change="changeReview(scope.row)"
                ></el-switch>
            </template>
        </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==2">处理异常</el-tag>
                <el-tag effect="plain" type="warning" v-if="scope.row.status==0">待处理</el-tag>
            </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="desc" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.status!=0" @click="seeExecLog(scope.row)">执行日志</el-button>
            </template>
        </el-table-column>
        <template slot="header-left">
            <el-button 
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="createUpload()"
            >添加</el-button>
        </template>
    </com-list-table>
    <create-upload v-if="dialog.createUpload" ref="createUploadDialog" @success="handleSuccess"></create-upload>
    <exec-log v-if="dialog.execLog" ref="execLogDialog"></exec-log>
</com-list-page>
<script>
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '首页',
                    router: 'mall/overview/index',
                },
                {
                    title: '小程序管理',
                },
                {
                    title: '小程序上传日志',
                }
            ],
            api: 'mall/mini-program/task',
            btnLoad: false,
            dialog: {
                createUpload: false,
                execLog: false,
            },
        },
        methods: {
            /**
             * 本地更新数据
             */
            handleSuccess() {
                this.dialog.createUpload = false
                this.$nextTick(() => {
                    this.$refs.table.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
                let params = {
                    r: 'mall/mini-program/task-log',
                    id: row.id
                }
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        // this.dialog.execLog = true
                        this.$nextTick(() => {
                            this.$refs.execLogDialog.open(e.data.data)
                        })
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    this.dialog.execLog = false
                })
                // this.dialog.execLog = true
                // console.log(row);
                // this.$nextTick(() => {
                //     console.log(this.$refs)
                //     this.$refs.execLogDialog.open(row)
                // })
            },
            changeReview(row) {
                let params = {
                    r: 'mall/mini-program/task-change-review',
                    id: row.id
                }
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$nextTick(() => {
                            this.$refs.table.getList()
                        })
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.getConfLoading = false;
                })
            },
            isReviewLabel(h) {
                return h('div', {}, [
                    h('span', '是否发布'),
                    h('el-tooltip', {
                        props: {
                            effect: 'dark',
                            content: '小程序发布成功后，请将开关打开，否则部分内容可能无法查看',
                            placement: 'top',
                            'popper-class': 'w-200'
                        }
                    }, [
                        h('i', {
                            class: 'el-icon-info'
                        })
                    ])
                ])
            },
        }
    })
</script>