qimall/backend/modules/admin/views/addons/index.php

<?php

?>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">

            <div class="input-item" style="display: flex;align-items: center">
                <span style="width: 70px">应用列表</span>
                <el-select v-model="search.addons_group_name" slot="prepend" placeholder="请选择">
                    <el-option
                            v-for="item in addons_group_arr"
                            :key="item.name"
                            :label="item.title"
                            :value="item.name">
                    </el-option>
                </el-select>
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;

                <el-input @keyup.enter.native="getList"  placeholder="请输入搜索应用名称" v-model="search.keyword"
                          clearable @clear="toSearch" style="width: 300px">
                </el-input>
                &nbsp;
                <el-button  type="primary" @click="toSearch">搜索</el-button>

                <el-button type="danger" @click="clearSearch" v-if="search.keyword!=''||search.addons_group_name!=''">清除条件</el-button>



            </div>
        </div>
        <div class="table-body">
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                <el-table-column label="应用标题" prop="title" align="center" max-width="180">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.title}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="应用名称" prop="name" align="center" max-width="180">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="应用封面" prop="name" align="center" max-width="180">
                    <template slot-scope="scope">
                        <div size="small">
                            <el-image style="width: 50px;height: 50px;border-radius: 5px;border: 1px solid black" :src="scope.row.cover">
                                <div slot="error" class="image-slot">
                                    <com-image :src="scope.row.default_cover"></com-image>
                                </div>
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="作者" prop="author" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.author}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="应用分组" prop="group" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{addons_group_name(scope.row.group)}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="版本号" prop="version" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.version}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="简介" prop="version" align="center" max-width="280" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.brief_introduction}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="group" align="center" max-width="50">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 1" size="mini" type="success" icon="el-icon-check" circle></el-button>
                        <el-button v-else size="mini" type="danger" icon="el-icon-close" circle></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="是否上架" prop="group" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.is_online == 1" size="mini" type="success" icon="el-icon-check" circle></el-button>
                        <el-button v-if="scope.row.is_online == 0" size="mini" type="danger" icon="el-icon-close" circle></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="operate(scope.row.name,'edit')">编辑</el-button>
                        <el-button type="text" v-if="scope.row.status == 1" @click="operate(scope.row.name,'disable')">禁用</el-button>
                        <el-button type="text" v-if="scope.row.status == 0" @click="operate(scope.row.name,'disable')">启用</el-button>
                        <el-popover placement="right" width="150" trigger="hover">
                            <div style="display: flex;flex-direction: column;">
                                <el-button type="text" @click="operate(scope.row.name,'uninstall')">卸载</el-button>
                                <el-button v-if="scope.row.is_extra_setting == 1" type="text" @click="$navigate({r:'admin/addons/extra-setting', addons:'Workwx'})">额外设置</el-button>
                                <el-button type="text" @click="operate(scope.row.name,'reload')">更新配置</el-button>
                                <el-button type="text" @click="operate(scope.row.name,'upgrade')">升级数据库</el-button>
                                <el-button v-if="scope.row.is_online == 1" type="text" @click="operate(scope.row.name,'offline')">下架</el-button>
                                <el-button v-if="scope.row.is_online == 0" type="text" @click="operate(scope.row.name,'online')">上架</el-button>
                            </div>
                            <el-button  slot="reference" @click.stop style="margin-left: 10px;" size="mini" type="text">更多</el-button>
                        </el-popover>
                        <!-- <el-button type="primary" size="mini" @click="operate(scope.row.name,'edit')">编辑</el-button>
                        <el-button v-if="scope.row.status == 1" type="info" plain size="mini" @click="operate(scope.row.name,'disable')">禁用</el-button>
                        <el-button v-if="scope.row.status == 0" type="success" size="mini" @click="operate(scope.row.name,'disable')">启用</el-button>
                        <el-button type="danger" size="mini" @click="operate(scope.row.name,'uninstall')">卸载</el-button>
                        <el-button size="mini" @click="operate(scope.row.name,'reload')">更新配置</el-button>
                        <el-button size="mini" @click="operate(scope.row.name,'upgrade')">升级数据库</el-button>
                        <el-button v-if="scope.row.is_online == 1" type="warning" size="mini" @click="operate(scope.row.name,'online')">下架</el-button>
                        <el-button v-if="scope.row.is_online == 0" type="warning" size="mini" @click="operate(scope.row.name,'online')">上架</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: [],
                addons_group:{},
                addons_group_arr:[],
                listLoading: false,
                operateLoading: false,
                page: 1,
                pageCount: 0,
                search: {
                    keyword: '',
                    addons_group_name: '',
                }
            };
        },
        methods: {
            clearSearch(){
                this.search.keyword='';
                this.search.addons_group_name='';
                this.getList();
            },
            toSearch() {
                this.getList();
            },
            addons_group_name(name){
                if(this.addons_group[name]){
                    return this.addons_group[name].title
                }else{
                    return  '未分类';
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },

            handleList(list){
                for(let item in list){
                    list[item].default_cover = _diy_img_prefix+'/static/addons/icon/'+list[item].name+'.png'
                }
            },
            // 获取插件列表
            getList() {
                console.log('search',this.search);
                let self = this;
                if(self.listLoading == false){
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'admin/addons/index',
                            page: self.page,
                            keyword : this.search.keyword,
                            addons_group_name : this.search.addons_group_name
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        this.handleList(e.data.data.list)
                        self.list = e.data.data.list;
                        self.addons_group = e.data.data.addons_group;
                        self.addons_group_arr = e.data.data.addons_group_arr;
                        console.log(self.list)
                        self.pageCount = e.data.data.page_count;
                    }).catch(e => {
                        console.log(e);
                    });
                }
            },
            operate(name,type){
                switch(type){
                    case 'reload':
                        this.$confirm('更新配置会重载模块的配置和权限, 更新后需要重新授权，确认更新配置吗？', '警告', {type: 'warning'}).then(() => {this.send(name,type)})
                        break;
                    case 'uninstall':
                        this.$confirm('确认要卸载该应用吗？请谨慎操作', '警告', {type: 'warning'}).then(() => {this.send(name,type)});
                        break;
                    case 'disable':
                        this.$confirm('确认要禁用该应用吗？', '警告', {type: 'warning'}).then(() => {this.send(name,type)});
                        break;
                    case 'upgrade':
                        this.$confirm('此操作会执行更新数据库字段升级等功能，确认升级数据库吗？', '警告', {type: 'warning'}).then(() => {this.send(name,type)});
                        break;
                    case 'online':
                        this.$confirm('上架应用后商城用户可在应用市场安装此插件，确认上架吗？', '警告', {type: 'warning'}).then(() => {this.send(name,type)});
                        break;
                    case 'offline':
                        this.$confirm('下架应用后商城用户无法在应用市场安装此插件，确认下架吗？', '警告', {type: 'warning'}).then(() => {this.send(name,type)});
                        break;
                    case 'edit':
                        this.$navigate({
                            r: 'admin/addons/edit',
                            name: name
                        });
                        break;
                    default :
                }


            },
            send(name,type){
                let self = this;
                if(self.operateLoading == false){
                    self.operateLoading = true;
                    request({
                        params: {r: 'admin/addons/index'},
                        method: 'post',
                        data: {name:name,type:type}
                    }).then(e => {
                        self.operateLoading = false
                        if (e.data.code == 0) {
                            this.$message({message: e.data.msg,type: 'success'});
                            self.getList();
                        } else {
                            this.$message({message: e.data.msg,type: 'error'});
                        }
                    }).catch(e => {
                        self.operateLoading = false
                        console.log(e);
                    });
                }
            }
        },
        mounted: function() {
            localStorage.setItem('admin_addons_menu_id', localStorage.getItem('open_menu_2_id'));
            this.getList();
        }
    });
</script>