<template>
|
<div class="right-main">
|
<div class="top-title">
|
<p>应用列表</p>
|
</div>
|
|
<div class="control-bar">
|
<div class="line-one">
|
<div class="screening">
|
<label>应用名称</label>
|
<el-input v-model="inputText" placeholder="请输入" prefix-icon="el-icon-search" size="small"></el-input>
|
</div>
|
<div class="screening">
|
<el-button plain class="btn-search" type="primary" size="small" @click="renderAppList(1)">搜索</el-button>
|
<el-button class="btn-reset" @click="clearSearch" size="small">重置</el-button>
|
</div>
|
</div>
|
<div class="right-fixed">
|
<el-button class="cursor-pointer" type="primary" @click="addApp" size="small">创建应用</el-button>
|
</div>
|
</div>
|
<div class="table-area" ref="container">
|
<el-table
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
>
|
<!-- <el-table-column type="selection" width="30"></el-table-column> -->
|
<el-table-column label="序号" width="68">
|
<template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
|
</el-table-column>
|
<el-table-column prop="id" label="应用编号" sortable width="220"></el-table-column>
|
<el-table-column prop="isDefault" label="应用类型" width="150">
|
<template slot-scope="scope">
|
<div>{{ scope.row.isDefault ? "默认应用" : "可选应用" }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="应用名称" sortable min-width="200"></el-table-column>
|
<el-table-column prop="version" label="最新版本号" width="150" sortable></el-table-column>
|
<el-table-column
|
prop="updateTime"
|
label="最后更新时间"
|
width="240"
|
show-overflow-tooltip
|
sortable
|
></el-table-column>
|
<el-table-column prop="updateUserName" label="更新人" width="130" sortable></el-table-column>
|
<el-table-column label="操作" width="120">
|
<template slot-scope="scope">
|
<span class="cursor-pointer" @click="editRow(scope.row.id)">编辑</span>
|
<span class="cursor-pointer" @click="deleteRow(scope.row.id)">删除</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { getAppList, deleteApp } from "@/api/app"
|
export default {
|
data() {
|
return {
|
inputText: "",
|
page: 1,
|
size: 10,
|
total: 0,
|
dataList: [],
|
tableHeight: window.innerHeight - 400,
|
tableLoading: false
|
}
|
},
|
mounted() {
|
this.renderAppList()
|
},
|
methods: {
|
renderAppList(v) {
|
this.tableLoading = true
|
let params = {
|
inputText: this.inputText,
|
page: v === 1 ? 1 : this.page,
|
size: this.size
|
}
|
// getAppList(params)
|
// .then((res) => {
|
// if (res.code) {
|
// this.dataList = res.data.list
|
// this.total = res.data.total
|
// this.tableLoading = false
|
// if (res.data.total <= this.size) {
|
// this.page = 1
|
// }
|
// }
|
// })
|
// .catch((e) => {
|
// console.log(e)
|
// this.tableLoading = false
|
// if (e && e.status == 401) {
|
// return
|
// }
|
// this.$notify({
|
// type: "error",
|
// message: "数据获取失败,请稍后重试!",
|
// duration: 2500,
|
// offset: 57
|
// })
|
// })
|
},
|
refrash(page) {
|
this.page = page
|
this.renderAppList()
|
},
|
clearSearch() {
|
this.inputText = ""
|
this.renderAppList()
|
},
|
handleSizeChange(size) {
|
this.size = size
|
this.renderAppList()
|
},
|
addApp() {
|
this.$router.push({ name: "appEdit", params: { appId: "create" } })
|
},
|
editRow(id) {
|
this.$router.push({ name: "appEdit", params: { appId: id } })
|
},
|
deleteRow(id) {
|
this.$confirm("确定删除该应用吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
center: true
|
})
|
.then(() => {
|
// deleteApp({ id }).then((res) => {
|
// if (res.code == 200) {
|
// this.$message({
|
// type: "success",
|
// message: "删除成功!"
|
// })
|
// this.renderAppList()
|
// }
|
// })
|
})
|
.catch((e) => {
|
console.log(e)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
// .el-message-box__status.el-icon-warning {
|
// left: 75px;
|
// font-size: 20px !important;
|
// }
|
</style>
|
