<template>
|
<div class="main">
|
<div class="inner" ref="wraper">
|
<a-spin class="" :spinning="spinning" tip="拼命加载中...">
|
<a-card>
|
<advance-table
|
ref="table"
|
class="doc-center-table"
|
:data-source="dataSource"
|
:columns="columns"
|
title=""
|
:row-key="(record, index) => index"
|
@search="onSearch"
|
@refresh="onRefresh"
|
@reset="onReset"
|
:format-conditions="true"
|
:scroll="{ x: 1920, y }"
|
:pagination="{
|
current: pageCurr,
|
pageSize: pageSize,
|
total: total,
|
showSizeChanger: true,
|
showLessItems: true,
|
showQuickJumper: true,
|
pageSizeOptions: ['10', '20', '50', '100'],
|
showTotal: (total, range) =>
|
`第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
|
onChange: onPageChange,
|
onShowSizeChange: onSizeChange,
|
}"
|
>
|
<template slot="title">
|
<a-space>
|
<span class="title">软件中心</span>
|
<a-button
|
v-if="canUploadSoftware"
|
type="primary"
|
@click="showUpload"
|
>上传软件</a-button
|
>
|
</a-space>
|
</template>
|
<template slot="action" slot-scope="{ record }">
|
<a-popover title="" trigger="hover">
|
<div class="" slot="content" style="width: 450px">
|
<a-table
|
size="small"
|
:scroll="{ y: 300 }"
|
bordered
|
:columns="prodsColumns"
|
:data-source="record.links"
|
:pagination="false"
|
:expandRowByClick="true"
|
:row-key="(record1, index) => index"
|
>
|
</a-table>
|
</div>
|
<a>适用机型</a>
|
</a-popover>
|
<template v-if="canDownloadSoftware">
|
<a-divider type="vertical"></a-divider>
|
<a @click="download(record)">下载</a>
|
</template>
|
</template>
|
</advance-table>
|
</a-card>
|
</a-spin>
|
</div>
|
<!-- 上传软件 -->
|
<a-modal
|
:visible="uploadShow"
|
:footer="null"
|
:width="760"
|
title="上传软件"
|
:destroyOnClose="true"
|
:maskClosable="false"
|
@cancel="uploadCancel"
|
>
|
<div class="">
|
<a-row type="flex" class="row">
|
<a-col flex="6em" class="label">软件包</a-col>
|
<a-col :flex="1">
|
<a-upload
|
class="upload"
|
:before-upload="beforeUpload"
|
@change="uploadChange"
|
accept=".zip"
|
>
|
<a-button type="primary">选择软件</a-button>
|
</a-upload>
|
</a-col>
|
</a-row>
|
<a-row type="flex" class="row">
|
<a-col flex="6em" class="label">软件说明</a-col>
|
<a-col :flex="1">
|
<a-upload
|
class="upload"
|
:before-upload="beforeUpload"
|
@change="uploadChange1"
|
accept=".xls,.xlsx"
|
>
|
<a-button type="primary">说明文件</a-button>
|
</a-upload>
|
</a-col>
|
</a-row>
|
<div class="sub-title">说明文件解析结果</div>
|
<div class="res-content">
|
<desc-res :info="resData"></desc-res>
|
</div>
|
<div class="modal-footer">
|
<a-button type="danger" @click="uploadCancel"> 取消 </a-button>
|
<a-button type="primary" @click="uploadSoftware"> 提交 </a-button>
|
</div>
|
</div>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import AdvanceTable from "@/components/table/advance/AdvanceTable";
|
import checkPermit from "@/assets/js/tools/checkPermit";
|
import PERMITS from "@/assets/js/const/const_permits";
|
import DescRes from "./descRes";
|
|
import {
|
getList,
|
downLoadSoftware,
|
excelParse,
|
productSoftwareSubmit,
|
} from "./apis";
|
import { mapGetters } from "vuex";
|
|
export default {
|
name: "",
|
data() {
|
return {
|
resData: [],
|
file: null,
|
file1: null,
|
uploadShow: false,
|
spinning: false,
|
loading: false,
|
pageCurr: 1,
|
pageSize: 10,
|
total: 0,
|
y: 400,
|
update: -1,
|
conditions: {},
|
columns: [
|
{
|
title: "名称",
|
dataIndex: "soft.fileName",
|
align: "center",
|
searchAble: true,
|
},
|
{
|
title: "类型",
|
dataIndex: "soft.type",
|
align: "center",
|
width: 180,
|
noSearch: true,
|
},
|
{
|
title: "版本",
|
dataIndex: "soft.version",
|
align: "center",
|
noSearch: true,
|
},
|
{
|
title: "负责人",
|
dataIndex: "soft.owner",
|
align: "center",
|
searchAble: true,
|
width: 160
|
},
|
{
|
title: "适用机型号",
|
dataIndex: "applyModel",
|
align: "center",
|
searchAble: true,
|
visible: false,
|
},
|
{
|
title: "适用机料号",
|
dataIndex: "applyMaterialCode",
|
align: "center",
|
searchAble: true,
|
visible: false,
|
},
|
{
|
title: "升级说明",
|
dataIndex: "soft.releaseNotes",
|
align: "center",
|
noSearch: true,
|
},
|
{
|
title: "操作",
|
dataIndex: "operation",
|
align: "center",
|
width: 168,
|
fixed: "right",
|
scopedSlots: { customRender: "action" },
|
noSearch: true,
|
},
|
],
|
dataSource: [],
|
prodsColumns: [
|
{
|
title: "型号",
|
dataIndex: "applyModel",
|
align: "center",
|
searchAble: true,
|
},
|
{
|
title: "料号",
|
dataIndex: "applyMaterialCode",
|
align: "center",
|
width: 180,
|
noSearch: true,
|
},
|
]
|
};
|
},
|
components: {
|
AdvanceTable,
|
DescRes,
|
},
|
methods: {
|
onSearch(conditions, searchOptions) {
|
// console.log(conditions);
|
// console.log(searchOptions);
|
this.pageCurr = 1;
|
this.conditions = conditions;
|
this.searchData();
|
},
|
onPageChange(page, pageSize) {
|
this.pageCurr = page;
|
this.pageSize = pageSize;
|
this.searchData();
|
},
|
onSizeChange(current, size) {
|
this.pageCurr = 1;
|
this.pageSize = size;
|
this.searchData();
|
},
|
onRefresh(conditions) {
|
this.conditions = conditions;
|
this.searchData();
|
},
|
onReset(conditions) {
|
this.conditions = conditions;
|
this.searchData();
|
},
|
searchData() {
|
const { pageCurr, pageSize, conditions } = this;
|
let params = {};
|
Object.keys(conditions).forEach((v) => {
|
switch (v) {
|
case "soft.fileName":
|
params[v] = conditions['fileName'];
|
break;
|
case "soft.owner":
|
params[v] = conditions['owner'];
|
break;
|
default:
|
params[v] = conditions[v];
|
break;
|
}
|
});
|
getList(pageCurr, pageSize, params).then((res) => {
|
res = res.data;
|
// console.log(res);
|
let data = [];
|
let total = 0;
|
if (res.code && res.data) {
|
data = res.data2.list.map((v) => {
|
let soft = v.softwares[0];
|
return {
|
id: soft.id,
|
soft,
|
links: v.softwares,
|
};
|
});
|
total = res.data2.total;
|
}
|
this.dataSource = data;
|
this.total = total;
|
if (-1 == this.update) {
|
this.update = Math.random();
|
}
|
});
|
},
|
download(obj) {
|
const { id } = obj;
|
downLoadSoftware(id).then((res) => {
|
// console.log(res, "===========");
|
let { headers, data, status } = res;
|
if (200 == status && data) {
|
let url = window.URL.createObjectURL(data);
|
const matchRes = /filename=(.*)/.exec(headers["content-disposition"]);
|
const fileName = matchRes
|
? decodeURI(matchRes[1].trim())
|
: "未知文件名.zip";
|
let link = document.createElement("a");
|
link.style.display = "none";
|
link.href = url;
|
link.download = fileName;
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
window.URL.revokeObjectURL(url);
|
} else {
|
this.$message.error("操作失败");
|
}
|
});
|
},
|
resize() {
|
setTimeout(() => {
|
this.update = Math.random();
|
}, 200);
|
},
|
activeFN() {
|
this.resize();
|
},
|
showUpload() {
|
this.file = null;
|
this.file1 = null;
|
this.resData = [];
|
this.uploadShow = true;
|
},
|
beforeUpload() {
|
return false;
|
},
|
uploadChange(data) {
|
const { file, fileList } = data;
|
if (fileList.length > 1) {
|
fileList.shift();
|
}
|
if (fileList.length) {
|
this.file = fileList[0].originFileObj;
|
} else {
|
this.file = null;
|
}
|
},
|
uploadChange1(data) {
|
const { file, fileList } = data;
|
if (fileList.length > 1) {
|
fileList.shift();
|
}
|
if (fileList.length) {
|
this.file1 = fileList[0].originFileObj;
|
} else {
|
this.file1 = null;
|
this.resData = [];
|
return false;
|
}
|
const formData = new FormData();
|
formData.append("multipartFile", this.file1);
|
excelParse(formData).then((res) => {
|
const { code, data, data2, msg } = res.data;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
this.$message.success(msg);
|
} else {
|
this.$message.error(msg);
|
}
|
this.resData = list;
|
});
|
},
|
uploadCancel() {
|
this.uploadShow = false;
|
},
|
uploadSoftware() {
|
if (!this.file) {
|
this.$message.error("请选择要上传的软件包");
|
return false;
|
}
|
if (!this.file1) {
|
this.$message.error("请选择软件说明文件");
|
return false;
|
}
|
if (!this.resData.length) {
|
this.$message.error("软件说明文件解析异常");
|
return false;
|
}
|
let loading = this.$layer.loading();
|
|
const formData = new FormData();
|
formData.append("file1", this.file);
|
formData.append("file2", this.file1);
|
formData.append("softwareStr", JSON.stringify(this.resData));
|
productSoftwareSubmit(formData)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code) {
|
this.uploadShow = false;
|
this.$message.success(msg);
|
this.searchData();
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((error) => {
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
},
|
watch: {
|
update(n) {
|
if (-1 != n && !this._inactive) {
|
this.$nextTick(() => {
|
const table = this.$refs.table;
|
const header = document.querySelectorAll(
|
".doc-center-table .ant-table-header"
|
)[0].clientHeight;
|
const bar = document.querySelectorAll(".header-bar")[0].clientHeight;
|
if (table.fullScreen) {
|
this.y = table.$el.clientHeight - bar - header - 64;
|
} else {
|
const wraper = this.$refs.wraper.clientHeight;
|
const card = document.querySelectorAll(".ant-card-body")[0];
|
const { paddingBottom, paddingTop } = getComputedStyle(card, null);
|
const h =
|
wraper -
|
header -
|
64 -
|
bar -
|
parseInt(paddingBottom) -
|
parseInt(paddingTop);
|
// console.log(h, "h",wraper, header, bar );
|
this.y = h;
|
}
|
});
|
}
|
},
|
affixed() {
|
setTimeout(() => {
|
this.update = Math.random();
|
}, 200);
|
},
|
},
|
computed: {
|
...mapGetters("account", ["permits"]),
|
...mapGetters("setting", ["affixed"]),
|
canUploadSoftware() {
|
return checkPermit(PERMITS.uploadSoftware, this.permits);
|
},
|
canDownloadSoftware() {
|
return checkPermit(PERMITS.downloadSoftware, this.permits);
|
},
|
},
|
mounted() {
|
this.searchData();
|
window.addEventListener("resize", this.resize);
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.resize);
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.main {
|
height: 100%;
|
position: relative;
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
/deep/table {
|
table-layout: fixed;
|
}
|
.modal-footer {
|
text-align: right;
|
button + button {
|
margin-left: 8px;
|
}
|
}
|
.label {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding-right: 0.4em;
|
height: 32px;
|
&::after {
|
content: ":";
|
}
|
}
|
.row ~ .row {
|
margin-top: 10px;
|
}
|
.upload {
|
display: flex;
|
/deep/.ant-upload-list {
|
flex: 1;
|
position: relative;
|
& > div {
|
position: absolute;
|
left: 0;
|
right: 0;
|
}
|
}
|
}
|
.sub-title {
|
font-size: 14px;
|
font-weight: 700;
|
margin-top: 10px;
|
}
|
.res-content {
|
max-height: 260px;
|
overflow-y: auto;
|
margin-bottom: 10px;
|
}
|
</style>
|
