no message

src/views/system/application/index.vue

@@ -8,7 +8,7 @@
         <div class="flex-1 dis-f">
             <div class="hid-box tran-width">
                 <div class="tab-info-box tab-info-box-hid">
-                    <setting-plugin v-if="activeName == 'manage'"></setting-plugin>
+                    <InstalledApplist v-if="activeName == 'manage'"></InstalledApplist>
                     <plugin-market v-if="activeName == 'market'"></plugin-market>
                 </div>
             </div>
@@ -18,7 +18,7 @@
 
 <script>
 import pluginMarket from './pluginMarket.vue';
-import SettingPlugin from './settingPlugin.vue';
+import InstalledApplist from './installedApplist.vue';
 export default {
     data() {
         return {
@@ -28,7 +28,7 @@ export default {
     },
     components: {
         pluginMarket,
-        SettingPlugin
+        InstalledApplist
     },
     mounted() {
 

src/views/system/application/installedApplist.vue

@@ -0,0 +1,283 @@
+<template>
+    <div class="dis-f warp pos-r" ref="tabBox"  style="width:100%">
+        <el-table :data="data" style="width:100%" v-loading="loading">
+            <el-table-column label="">
+                <template #default="scope">
+                    <div class="tab-box dis-f al-item">
+                        <img :src="scope.row.icon" class="img" alt="">
+                        <div class="info-box">
+                            <div class="title">
+                                {{ scope.row.name }}
+                            </div>
+                            <div class="info-text">
+                                {{ scope.row.description }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="版本" width="100">
+                <template #default="scope">
+                    <span>{{ scope.row.version }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="目录" width="100">
+                <template #default="scope">
+                    <code>{{ scope.row.app }}</code>
+                </template>
+            </el-table-column>
+            <el-table-column label="安装时间" width="160">
+                <template #default="scope">
+                    <span v-time="scope.row.timestamp"></span>
+                </template>
+            </el-table-column>
+            <el-table-column label="状态" width="80">
+                <template #default="scope">
+                    <el-switch v-model="scope.row.status" :before-change="changeStatus(scope.row)" :loading="scope.row.changeStatusloading||false" />
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="120" fixed="right" align="center">
+                <template #default="scope">
+                    <div class="tool-box dis-f jus-bet al-item" style="display: contents;">
+                        <el-icon @click="uninstall(scope.row, scope.$index)" class="icon">
+                            <el-icon-delete />
+                        </el-icon>
+                        <el-icon style="margin-left:10px" @click="installPlugin(scope.row)" v-if="!scope.row.isdelete" class="icon">
+                            <el-icon-setting />
+                        </el-icon>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+
+    <div class="pop-box" v-show="popShow">
+        <pop-info :showPop="closePlugin" :item="info"></pop-info>
+    </div>
+</template>
+
+<script>
+import popInfo from './popInfo.vue'
+import { ElMessageBox } from 'element-plus';
+
+export default {
+    components: { popInfo },
+  data() {
+    return {
+      data: [],
+      loading:false,
+      popShow: false,
+      info: {},
+    }
+  },
+  mounted() {
+      this.loaddata();
+  },
+  methods: {
+    installPlugin(o) {
+        this.info = o;
+        this.popShow = true;
+    },
+    closePlugin(refresh = false){
+        this.info = {};
+        this.popShow = false;  
+        if (refresh===true) {
+            this.loaddata();
+        }
+    },
+    loaddata(){
+        this.loading = true;
+        this.$http.get('admin/application/installedApplist').then((res) => {
+            this.loading = false;
+            if (res.code == 200) {
+                this.data = res.data;
+            }
+        });
+    },
+    changeStatus(o){
+
+        // o.changeStatusloading = true;
+        console.log(o)
+        // this.$http.get('admin/application/installedApplist').then((res) => {
+        //     this.changeStatusloading = false;
+        //     if (res.code == 200) {
+        //         this.data = res.data;
+        //     }
+        // });
+
+    },
+    uninstall(item, index) {
+
+        ElMessageBox.confirm('当前操作不可逆,可能会造成无法访问或数据清空.', '正在卸载应用', {
+            type: 'error',
+            closeOnClickModal: false,
+            confirmButtonText: '确认卸载',
+        }).then(() => {
+            this.$http.post('admin/application/uninstall', {app:item.app}).then((res) => {
+                if (res.code == 200) {
+                    this.data.splice(index, 1)
+                    this.$message.success(res.message || "操作成功")
+                    return true;
+                }
+                this.$alert(res.message, "提示", {type: 'error'});
+            });
+            
+        }).catch(() => {})
+        
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+    .pop-box{
+        position: fixed;
+        top:0;
+        left:0;
+        z-index:999;
+        background: rgba(0,0,0,.5);
+        width:100vw;
+        height:100vh;
+    }
+code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    border-radius: 4px;
+    clear: both;
+    display: initial;
+    cursor: pointer;
+}
+.dis-f {
+    display: flex;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.warp {
+    flex-wrap: wrap;
+}
+
+.pd-15 {
+    padding: 15px;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.tab-box .tag-box .tag-mg {
+    margin: 0 5px 5px 0
+}
+
+.tab-box .img {
+    width: 48px;
+    height: 48px;
+    margin-right: 16px;
+    border-radius: 10px;
+}
+
+.tab-box .info-box {
+    flex: 0.9;
+    overflow: hidden;
+}
+
+.tab-box .info-box .title {
+    color: #141e31;
+    flex-shrink: 1;
+    font-size: 16px;
+    font-weight: 500;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tab-box .info-box .info-text {
+    color: #838892;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.tab-box {
+    background: transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    padding: 16px;
+    position: relative;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+    width: 100%
+}
+
+.tool-box {
+    font-size: 20px;
+}
+.tool-box .icon{
+    cursor: pointer;
+}
+
+.customize-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 666;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    cursor: move;
+}
+
+.customize-overlay label {
+    background: var(--el-color-primary);
+    color: #fff;
+    height: 40px;
+    padding: 0 30px;
+    border-radius: 40px;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: move;
+}
+
+.customize-overlay label i {
+    margin-right: 15px;
+    font-size: 24px;
+}
+
+.customize-overlay .close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+.draggable-box {
+    height: 100%;
+    width: 100%;
+    display: contents;
+}
+
+.customize-overlay .close:focus,
+.customize-overlay .close:hover {
+    background: var(--el-button-hover-color);
+    color: var(--el-color-danger);
+}
+</style>

src/views/system/application/pluginMarket.vue

@@ -43,9 +43,12 @@ export default {
         this.info = o;
         this.popShow = true;
     },
-    closePlugin(){
+    closePlugin(refresh = false){
         this.info = {};
         this.popShow = false;  
+        if (refresh===true) {
+            this.loaddata();
+        }
     },
     unObserve() {
       this.resize.unobserve(this.tabBox)

src/views/system/application/popInfo.vue

@@ -15,19 +15,24 @@
                             <div class="data-title">{{ item.name }}</div>
                             <div class="data-info-text">目录：<code>{{  item.app }}</code></div>
                             <span class="data-info-type data-info-type-m jus-x">
+                                {{ item.islocal ? '本地插件' : '线上插件' }}
+                            </span>
+
+                            <span class="data-info-type data-info-type-m jus-x" style="margin-left: 5px; color: #fff; background-color: #67c23a;">
                                 免费
                             </span>
                         </div>
                     </div>
-                    <div class="install-btn" style="flex:0.2;">
+                    <div class="install-btn" @click="install" style="flex:0.2;" v-if="!item.installed">
                         安装
                     </div>
+                    <div v-else class="install-btn" @click="uninstall" style="flex:0.2;background: #9E9E9E; border-color: #9E9E9E;">
+                        卸载
+                    </div>
                 </div>
                 <div class="plugin-tag-title">
                     插件详情
                 </div>
-                <div class="plugin-box">
-                </div>
                 <div class="plugin-introduce">
                     {{ item.description }}
                 </div>
@@ -75,16 +80,75 @@
     </div>
 </template>
 
-<script setup>
+<script>
-import { defineProps } from 'vue'
+import { ElMessageBox } from 'element-plus';
-let props = defineProps({
+export default {
-    showPop: Function,
+    props: {
-    item: Object,
+        showPop: {
-})
+            type: Function,
+            required: true
+        },
+        item: {
+            type: Object,
+            required: true
+        }
+    },
+    methods: {
+        //关闭弹窗
+        closePop() {
+            this.showPop()
+        },
+        // 卸载
+        uninstall(){
 
-//关闭弹窗
+            ElMessageBox.confirm('当前操作不可逆,可能会造成无法访问或数据清空.', '正在卸载应用', {
-let closePop = () => {
+                type: 'error',
-    props.showPop()
+                closeOnClickModal: false,
+                confirmButtonText: '确认卸载',
+            }).then(() => {
+
+                this.$http.post('admin/application/uninstall', {app:this.item.app}).then((res) => {
+                    if (res.code == 200) {
+                        this.showPop(true)
+                        this.$message.success(res.message || "操作成功")
+                        return true;
+                    }
+                    this.$alert(res.message, "提示", {type: 'error'});
+                });
+                
+            }).catch(() => {})
+
+        },
+        // 安装
+        install(){
+
+
+            ElMessageBox.confirm(this.item.islocal?'在安装插件之前，请阅读插件的使用说明。':'此插件为远程应用, 如安装失败请确认是否有写入权限.或前往应用中心下载至本地再进行安装', '安装应用', {
+                type: 'warning',
+                closeOnClickModal: false,
+                confirmButtonText: '确认安装',
+            }).then(() => {
+
+                this.$http.post('admin/application/install', {app:this.item.app}).then((res) => {
+
+                    // 请先确认身份
+                    if (res.code == 205) {
+                        alert(1);
+                    }
+
+
+                    if (res.code == 200) {
+                        console.log(res)
+                        this.$message.success(res.message || "操作成功")
+                        return true;
+                    }
+                    this.$alert(res.message, "提示", {type: 'error'});
+                });
+                
+            }).catch(() => {})
+
+        }
+    }
 }
 </script>
 

src/views/system/application/settingPlugin.vue

@@ -1,221 +0,0 @@
-<template>
-    <div class="dis-f warp pos-r" ref="tabBox"  style="width:100%">
-        <el-table :data="data" style="width:100%">
-            <el-table-column label="">
-                <template #default="scope">
-                    <div class="tab-box dis-f al-item">
-                        <img src="" class="img" alt="">
-                        <div class="info-box">
-                            <div class="title">
-                                {{ scope.row.title }}
-                            </div>
-                            <div class="info-text">
-                                111111111111111111111111111111111111111
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </el-table-column>
-            <el-table-column label="版本" width="120">
-                <template #default="scope">
-                    <div>type: {{ scope.row.type }}</div>
-                </template>
-            </el-table-column>
-            <el-table-column label="状态" width="120">
-                <template #default="scope">
-                    <el-switch v-model="scope.row.switch" />
-                </template>
-            </el-table-column>
-            <el-table-column label="操作" width="120" fixed="right" align="center">
-                <template #default="scope">
-                    <div class="tool-box dis-f jus-bet al-item">
-                        <el-icon @click="open(scope.$index)" class="icon">
-                            <el-icon-delete />
-                        </el-icon>
-                        <el-icon style="margin-left:10px" class="icon">
-                            <el-icon-setting />
-                        </el-icon>
-                    </div>
-                </template>
-            </el-table-column>
-        </el-table>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-let data = ref([
-    { title: 1, type: 1, switch: false },
-    { title: 2, type: 1, switch: false },
-    { title: 3, type: 1, switch: false },
-    { title: 4, type: 1, switch: false },
-    { title: 5, type: 1, switch: false },
-    { title: 6, type: 1, switch: false },
-    { title: 6, type: 1, switch: false },
-    { title: 6, type: 1, switch: false },
-    { title: 6, type: 1, switch: false },
-    { title: 6, type: 1, switch: false }])
-
-let deleteTab = (id) => {
-    data.value.splice(id, 1)
-}
-
-const open = (id) => {
-    ElMessageBox.confirm(
-        '确认删除该插件吗?',
-        'Warning',
-        {
-            confirmButtonText: '确认',
-            cancelButtonText: '取消',
-            type: 'warning',
-        }
-    )
-        .then(() => {
-            deleteTab(id)
-            ElMessage({
-                type: 'success',
-                message: '删除成功',
-            })
-        })
-        .catch(() => {
-            ElMessage({
-                type: 'info',
-                message: '取消',
-            })
-        })
-}
-</script>
-
-<style scoped>
-.dis-f {
-    display: flex;
-}
-
-.flex-1 {
-    flex: 1;
-}
-
-.al-item {
-    align-items: center;
-}
-
-.warp {
-    flex-wrap: wrap;
-}
-
-.pd-15 {
-    padding: 15px;
-}
-
-.pos-r {
-    position: relative;
-}
-
-.tab-box .tag-box .tag-mg {
-    margin: 0 5px 5px 0
-}
-
-.tab-box .img {
-    width: 48px;
-    height: 48px;
-    margin-right: 16px;
-    border-radius: 10px;
-}
-
-.tab-box .info-box {
-    flex: 0.9;
-    overflow: hidden;
-}
-
-.tab-box .info-box .title {
-    color: #141e31;
-    flex-shrink: 1;
-    font-size: 16px;
-    font-weight: 500;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.tab-box .info-box .info-text {
-    color: #838892;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-}
-
-.tab-box {
-    background: transparent;
-    border-radius: 6px;
-    cursor: pointer;
-    padding: 16px;
-    position: relative;
-    -webkit-transition: all .2s ease;
-    transition: all .2s ease;
-    width: 100%
-}
-
-.tool-box {
-    font-size: 20px;
-}
-.tool-box .icon{
-    cursor: pointer;
-}
-
-.customize-overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 666;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.9);
-    cursor: move;
-}
-
-.customize-overlay label {
-    background: var(--el-color-primary);
-    color: #fff;
-    height: 40px;
-    padding: 0 30px;
-    border-radius: 40px;
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: move;
-}
-
-.customize-overlay label i {
-    margin-right: 15px;
-    font-size: 24px;
-}
-
-.customize-overlay .close {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-}
-
-.draggable-box {
-    height: 100%;
-    width: 100%;
-    display: contents;
-}
-
-.customize-overlay .close:focus,
-.customize-overlay .close:hover {
-    background: var(--el-button-hover-color);
-    color: var(--el-color-danger);
-}
-</style>