<!--
|
* @Descripttion:
|
* @version: 1.0.0
|
* @Author: glc
|
* @Date: 2022-04-29 16:13:29
|
* @LastEditors: Andy
|
* @LastEditTime: 2023-02-15 08:47:38
|
-->
|
<template>
|
<div>
|
<el-row align="middle" class="cardBox">
|
<el-col
|
:span="6"
|
v-for="(item, index) in tabledata"
|
:key="index"
|
:offset="0"
|
>
|
<el-card shadow="hover" class="appcard">
|
<div style="display: flex;">
|
<div class="card_left" @click="openWindow(item.url)">
|
<img
|
style="width: 100%"
|
:src="item.url"
|
/>
|
</div>
|
<div class="card_center">
|
<div class="app_item_name">应用名称：{{ item.appname }}</div>
|
<div class="app_item_name">应用类型：{{ item.typename }}</div>
|
<div class="app_item_name">创建时间：{{ item.createtime }}</div>
|
<div class="app_item_name" v-show="activetag === 1">
|
创建人：{{ item.creator }}
|
</div>
|
<div class="app_item_bottom" v-show="activetag === 2">
|
<el-button type="text" @click="deleteApp(item)" size="small"
|
>删除</el-button
|
>
|
<el-button type="text" @click.native="opdio(item)" size="small"
|
>重命名</el-button
|
>
|
<el-checkbox
|
v-model="item.ispublic"
|
size="mini"
|
style="margin-left: 5px"
|
@change="(checked) => handleSelectChange(checked, item)"
|
>公开</el-checkbox
|
>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-dialog title="修改名称"
|
:visible.sync="cardName"
|
width="30%" :modal="false">
|
<span>请输入修改名称:<el-input v-model="upName" placeholder="请输入内容"></el-input></span>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="cardName = false">取 消</el-button>
|
<el-button type="primary" @click="updataName()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {openMyApplication,deleteApplication,updateDataCenter} from "@/api/usercenter.js"
|
export default {
|
props: ["data", "refresh", "total", "activetag"],
|
data() {
|
return {
|
cardName:false,
|
updataInfo:{},
|
upName:""
|
};
|
},
|
methods: {
|
opdio(item){this.cardName = true;this.updataInfo = item},
|
updataName(){
|
let that = this
|
let data = {
|
"id": this.updataInfo.id,
|
"name": this.upName,
|
}
|
updateDataCenter(data).then(res=>{
|
if(res.code == 200) {this.$message.success(res.msg);this.cardName = false;that.handleQueryInlet()}
|
else this.$message.error(res.msg)
|
})
|
},
|
openApp(app) {
|
console.log(app.appname);
|
},
|
openWindow(url){
|
window.open(url)
|
},
|
deleteApp(item){
|
let that = this
|
console.log(that)
|
deleteApplication([item.id]).then(res=>{
|
if(res.code == 200) {this.$message.success(res.msg) ;that.handleQueryInlet()}
|
else this.$message.error(res.msg)
|
})
|
},
|
handleSelectChange(checked, item) {
|
openMyApplication(item.id).then(res=>{
|
if(res.code == 200) {this.$message.success(res.msg);}
|
else this.$message.error(res.msg)
|
})
|
},
|
handleQueryInlet(){
|
this.$parent.$parent.$parent.$parent.$parent.$parent.handleQueryInlet()
|
}
|
},
|
computed: {
|
tabledata() {
|
return this.data;
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.cardBox{
|
height: 520px;
|
width: 100%;
|
overflow:scroll;
|
.appcard {
|
margin-top: 15px;
|
width: 420px;
|
height: 170px;
|
.card_left {
|
height: 115px;
|
overflow: hidden;
|
display: inline-block;
|
width: 50%;
|
padding: 5px;
|
}
|
.card_center {
|
display: inline-block;
|
width: 45%;
|
padding: 5px;
|
.app_item_name {
|
font-weight: bold;
|
margin: 5px 2px;
|
}
|
.app_item_bottom {
|
width: 100%;
|
text-align: left;
|
display: inline-block;
|
}
|
}
|
}
|
.appcard:hover{
|
box-shadow: 0px 0px 14px 1px #11cdeb;
|
}
|
.card_left:hover {
|
cursor: pointer;
|
}
|
}
|
.cardBox::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 0px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 0px;
|
}
|
/deep/ .el-card {
|
background: #33517a !important;
|
border: 0px !important;
|
color: #fff !important;
|
}
|
</style>
|
