<template>
|
<div class="sys-pkg right-main">
|
<div class="top-title">
|
<p>系统安装包管理</p>
|
</div>
|
<div class="control-bar">
|
<div class="line-one">
|
<div class="screening" @click="addPkg">
|
<!-- <label></label> -->
|
<!-- <i class="el-icon-circle-plus-outline" ></i> -->
|
<span class="add-btn">系统安装包</span>
|
</div>
|
|
</div>
|
</div>
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
v-loading="loading"
|
element-loading-text="上传中"
|
element-loading-spinner="el-icon-loading"
|
>
|
<el-table-column label="序号" width="68">
|
<template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
|
</el-table-column>
|
<el-table-column label="系统安装包名称" min-width="100px">
|
<template slot-scope="scope">
|
<span>{{ scope.row.version }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="基础安装包" min-width="200px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span v-if="scope.$index != dataList.length - 1">{{ scope.row.intro }}</span>
|
<el-input
|
type="textarea"
|
size="small"
|
:rows="2"
|
v-if="isAdding && scope.$index == dataList.length - 1"
|
placeholder=""
|
v-model="addBody.intro"
|
>
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="upload_time" label="版本类型" min-width="150px" sortable></el-table-column>
|
|
<el-table-column prop="devName" label="创建时间" show-overflow-tooltip></el-table-column>
|
<el-table-column label="文件大小" min-width="250">
|
<template slot-scope="scope">
|
<div class="pkg-wrap" v-if="scope.row.fileName || scope.row.local_filename">
|
<div class="pkg-show">
|
<span>{{ scope.row.local_filename || scope.row.fileName }}</span>
|
</div>
|
<i
|
v-if="scope.$index !== dataList.length - 1"
|
class="el-icon-download"
|
@click="downloadPkg(scope.row)"
|
></i>
|
</div>
|
|
<el-upload
|
style="float: left; margin-right: 10px"
|
action
|
:disabled="scope.$index == dataList.length - 1 && !addBody.version && !addBody.intro"
|
v-if="scope.row.isEditting && !scope.row.local_filename"
|
:http-request="uploadPkg"
|
:show-file-list="false"
|
>
|
<div
|
class="up-btn"
|
@click="checkUpload(scope.$index)"
|
v-if="scope.row.isEditting && !scope.row.local_filename"
|
>
|
{{ "上传系统安装包" }}
|
</div>
|
</el-upload>
|
|
<el-button
|
style="float: left"
|
v-if="scope.$index !== dataList.length - 1 && scope.row.isEditting"
|
type="primary"
|
@click="dataList[scope.$index].isEditting = false"
|
plain
|
>取消</el-button
|
>
|
</template>
|
</el-table-column>
|
<el-table-column label="安装包信息" min-width="250">
|
<template slot-scope="scope">
|
<div class="pkg-wrap" v-if="scope.row.fileName || scope.row.local_filename">
|
<div class="pkg-show">
|
<span>{{ scope.row.local_filename || scope.row.fileName }}</span>
|
<!-- <span
|
class="icon iconfont"
|
style="cursor: pointer"
|
@click="reUpload(scope.$index)"
|
></span
|
> -->
|
</div>
|
<i
|
v-if="scope.$index !== dataList.length - 1"
|
class="el-icon-download"
|
@click="downloadPkg(scope.row)"
|
></i>
|
</div>
|
|
<el-upload
|
style="float: left; margin-right: 10px"
|
action
|
:disabled="scope.$index == dataList.length - 1 && !addBody.version && !addBody.intro"
|
v-if="scope.row.isEditting && !scope.row.local_filename"
|
:http-request="uploadPkg"
|
:show-file-list="false"
|
>
|
<!-- scope.row.isEditting ? "重新上传" : -->
|
<div
|
class="up-btn"
|
@click="checkUpload(scope.$index)"
|
v-if="scope.row.isEditting && !scope.row.local_filename"
|
>
|
{{ "上传系统安装包" }}
|
</div>
|
</el-upload>
|
|
<el-button
|
style="float: left"
|
v-if="scope.$index !== dataList.length - 1 && scope.row.isEditting"
|
type="primary"
|
@click="dataList[scope.$index].isEditting = false"
|
plain
|
>取消</el-button
|
>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="250">
|
<template slot-scope="scope">
|
<!-- v-if="
|
scope.$index != dataList.length - 1 && !scope.row.isEditting
|
" -->
|
<span class="icon iconfont del-icon" @click="deletePkg(scope.row.path)"></span>
|
<!-- v-if="scope.row.isEditting && scope.$index == dataList.length - 1" -->
|
<span class="icon iconfont cursor-pointer" @click="downloadPkg(scope.$index)">{{ "\ue63f" }}</span>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
@current-change="refresh"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
getSysPakages,
|
downloadSysPkg,
|
uploadSysPkg,
|
delSysPkg
|
} from "../api/product"
|
export default {
|
data() {
|
return {
|
page: 1,
|
addBody: {
|
version: "",
|
intro: ""
|
},
|
// addRule: {
|
// stopHours: "",
|
// runHours: "",
|
// recordKeep: "",
|
// cannel: "",
|
// camera: "",
|
// trial_year: ""
|
// },
|
loading: false,
|
isAdding: false,
|
// dialogVisible: false,
|
// errText: "生成产品密钥失败，请求码格式不正确。",
|
size: 10,
|
// codeText: "",
|
// radio3: "1 年",
|
// orderInfo: {
|
// id: "",
|
// chanelNum: 0,
|
// authNum: "",
|
// serviceTime: "",
|
// deviceNum: 0,
|
// activeNum: 0
|
// },
|
filename: "",
|
total: 0,
|
dataList: [],
|
arch: "amd64",
|
uploadIndex: null
|
}
|
},
|
mounted() {
|
this.fetchPkgList()
|
},
|
methods: {
|
|
checkUpload(i) {
|
if (i === this.dataList.length - 1 && !this.addBody.version && !this.addBody.intro) {
|
this.$message.warning("请先填写版本号和版本描述")
|
} else {
|
this.uploadIndex = i
|
}
|
},
|
reUpload(index) {
|
this.$set(this.dataList[index], "isEditting", true)
|
},
|
|
uploadPkg(params) {
|
this.filename = ""
|
let param = new FormData()
|
param.append("archive", params.file)
|
param.append("arch", this.arch)
|
param.append("version", this.addBody.version)
|
param.append("intro", this.addBody.intro)
|
this.loading = true
|
let that = this
|
uploadSysPkg(param)
|
.then((res) => {
|
that.loading = false
|
that.$notify.success("上传成功")
|
that.$set(that.dataList[that.uploadIndex], "local_filename", params.file.name)
|
that.$set(that.dataList[that.uploadIndex], "path", res.info.path)
|
})
|
.catch((err) => {
|
this.loading = false
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify.error("上传的安装包不符合要求")
|
})
|
},
|
fetchPkgList() {
|
getSysPakages({ page: this.page, size: this.size }).then((res) => {
|
this.dataList = res.data.list
|
this.dataList = [
|
{
|
sysName: "SmartAIOS 正式版",
|
baseName: "X86-稳定版-1.0.0",
|
version: "内测版",
|
createTime: "2019-11-7 17:37:34",
|
large: "5.44GB",
|
info: "实时监控、统计查询、摄像机配置、数据栈管理"
|
}
|
]
|
this.total = res.data.total
|
this.dataList.forEach((x) => {
|
this.$set(x, "isEditting", false)
|
this.$set(x, "local_filename", "")
|
})
|
// this.dataList.push({});
|
})
|
},
|
addPkg() {
|
this.isAdding = true
|
this.$set(this.dataList[this.dataList.length - 1], "isEditting", true)
|
},
|
downloadPkg({ path, fileName }) {
|
this.$confirm("确定下载该安装包吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
center: true
|
}).then(() => {
|
downloadSysPkg({ filename: path })
|
.then((res) => {
|
const blob = new Blob([res], { type: "application/zip" })
|
const url = window.URL.createObjectURL(blob)
|
const link = document.createElement("a") // 创建a标签
|
link.href = url
|
link.download = fileName // 设置下载的文件名
|
document.body.appendChild(link)
|
link.click() //执行下载
|
document.body.removeChild(link) //释放标签
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
})
|
},
|
handleSizeChange(size) {
|
this.size = size
|
},
|
refresh(page) {
|
this.page = page
|
},
|
deletePkg(path) {
|
this.$confirm("确定删除该安装包吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
center: true
|
}).then(() => {
|
delSysPkg({ path })
|
.then((res) => {
|
this.$notify.success("删除成功")
|
this.fetchPkgList()
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify.error("删除失败")
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.right-main .control-bar .line-one {
|
display: flex;
|
align-items: center;
|
min-height: 40px;
|
}
|
.right-main .control-bar .right-fixed {
|
top: 16px;
|
}
|
.screening {
|
font-size: 16px;
|
cursor: pointer;
|
// color: rgba(72, 118, 209, 1);
|
// .el-icon-circle-plus-outline {
|
// font-size: 16px;
|
// margin-right: 3px;
|
// }
|
}
|
.dial-bar {
|
font-size: 15px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
.label-name {
|
font-size: 15px;
|
font-weight: 600;
|
width: 120px;
|
// background-color: antiquewhite;
|
}
|
}
|
.pkg-wrap {
|
display: flex;
|
align-items: center;
|
.el-icon-download {
|
font-size: 22px;
|
// font-weight: 600;
|
color: rgba(119, 152, 255, 1);
|
cursor: pointer;
|
}
|
}
|
.pkg-show {
|
background: #f2f2f2;
|
width: 70%;
|
padding: 5px 15px;
|
border-radius: 5px;
|
margin-right: 10px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.del-icon {
|
color: #ea1e24;
|
font-size: 19px !important;
|
// font-weight: 600;
|
cursor: pointer;
|
line-height: 23px;
|
height: 23px;
|
}
|
.up-btn {
|
background-color: #ea1e24;
|
color: #f6f6f6;
|
padding: 5px 10px;
|
}
|
.sys-pkg {
|
.el-dialog__headerbtn .el-dialog__close {
|
color: darkgray;
|
}
|
}
|
</style>
|
