<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"
|
:loading="loading"
|
title=""
|
row-key="id"
|
@search="onSearch"
|
@refresh="onRefresh"
|
@reset="onReset"
|
:format-conditions="true"
|
:scroll="{ x: 400, 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">
|
<span class="title">产品中心</span>
|
<a-space class="operator" style="margin-left: 1em">
|
<a-upload
|
:before-upload="beforeUpload"
|
:showUploadList="false"
|
@change="pordUploadChange"
|
accept=".zip"
|
>
|
<a-button type="primary">新增</a-button>
|
</a-upload>
|
</a-space>
|
</template>
|
<template slot="isNormal" slot-scope="{ record }">
|
{{ record.customCode == "" ? "是" : "否" }}
|
</template>
|
<template slot="action" slot-scope="{ record }">
|
<a @click="upload(record)">上传软件</a>
|
<a-divider type="vertical"></a-divider>
|
<a @click="goDetails(record)">详情</a>
|
<a-divider type="vertical"></a-divider>
|
<a-popover title="" trigger="hover">
|
<a-space direction="vertical" slot="content">
|
<a-button type="primary" @click="edit(record)">编辑</a-button>
|
<a-button
|
v-if="downloadFlag"
|
type="primary"
|
@click="download(record)"
|
>下载</a-button
|
>
|
<a-button type="primary" @click="showCustom(record)"
|
>定制</a-button
|
>
|
</a-space>
|
<a>更多</a>
|
</a-popover>
|
</template>
|
</advance-table>
|
</a-card>
|
</a-spin>
|
</div>
|
<!-- 上传软件 -->
|
<a-modal
|
:visible="uploadShow"
|
:footer="null"
|
:width="500"
|
title="上传软件"
|
:destroyOnClose="true"
|
:maskClosable="false"
|
@cancel="uploadCancel"
|
>
|
<div class="">
|
<a-row class="title">
|
<a-col :span="6" class="text-right">
|
<span>产品信息</span>
|
</a-col>
|
<a-col :span="15" :offset="1">
|
<div class="lab">
|
{{ prodData.parentModel }} {{ prodData.parentName }}
|
</div>
|
</a-col>
|
</a-row>
|
<a-row class="upload">
|
<a-col :span="15" :offset="7">
|
<a-upload
|
:before-upload="beforeUpload"
|
@change="uploadChange"
|
accept=".zip"
|
>
|
<a-button type="primary">上传软件</a-button>
|
</a-upload>
|
</a-col>
|
</a-row>
|
<a-form-model
|
ref="formRef"
|
name="advanced_search"
|
class="ant-advanced-search-form"
|
:model="info"
|
:rules="rules"
|
>
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item
|
label="审核人"
|
:labelCol="{ span: 6 }"
|
:wrapperCol="{ span: 15, offset: 1 }"
|
prop="nextUser"
|
>
|
<a-select
|
show-search
|
v-model="info.nextUser"
|
placeholder="请选择审核人"
|
>
|
<a-select-option
|
v-for="(item, key) in userList"
|
:key="'key' + key"
|
:value="item.id"
|
:title="item.name"
|
>
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item
|
label="工单描述"
|
:labelCol="{ span: 6 }"
|
:wrapperCol="{ span: 15, offset: 1 }"
|
prop="description"
|
>
|
<a-textarea
|
placeholder="请输入工单描述"
|
v-model="info.description"
|
:rows="4"
|
/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
<div class="modal-footer">
|
<a-button type="danger" @click="uploadCancel"> 取消 </a-button>
|
<a-button type="primary" @click="uploadSoftware"> 提交审核 </a-button>
|
</div>
|
</div>
|
</a-modal>
|
<!-- 编辑产品 -->
|
<a-modal
|
:visible="editShow"
|
:footer="null"
|
:width="1200"
|
title="修改产品替换件信息"
|
:destroyOnClose="true"
|
:maskClosable="false"
|
@cancel="cancel"
|
>
|
<change-parts :parent-data="editObj" @close="cancel"></change-parts>
|
</a-modal>
|
<!-- 上传Bom -->
|
<a-modal
|
:visible="prodUploadShow"
|
:footer="null"
|
:width="960"
|
title="上传产品BOM"
|
:destroyOnClose="true"
|
:maskClosable="false"
|
@cancel="prodUploadCancel"
|
>
|
<draw-upload :list="resList" :y="320" :no-footer="true"></draw-upload>
|
<prod-upload
|
class="mt8"
|
@ok="submit"
|
@cancel="prodUploadCancel"
|
></prod-upload>
|
</a-modal>
|
<!-- 定制 -->
|
<a-modal
|
:visible="customShow"
|
:footer="null"
|
:width="700"
|
title="产品定制"
|
:destroyOnClose="true"
|
:maskClosable="false"
|
@cancel="customCancel"
|
>
|
<prod-upload
|
class="mt8"
|
:prod-info="customProd"
|
@ok="custom"
|
@cancel="customCancel"
|
></prod-upload>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import AdvanceTable from "@/components/table/advance/AdvanceTable";
|
import ChangeParts from "./changeParts";
|
import ProdUpload from "./prodUpload";
|
import DrawUpload from "@/pages/components/drawUpload";
|
|
import getWebUrl from "@/assets/js/tools/getWebUrl";
|
import { addProduct, downloadBom } from "./apis";
|
import { productSoftwareSubmit } from "../software/apis";
|
import { zipParse } from "@/pages/workplace/myDraw/apis";
|
import { mapGetters } from "vuex";
|
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("product");
|
|
export default {
|
name: "",
|
mixins: [WSMixin],
|
data() {
|
return {
|
prodUploadShow: false,
|
info: {
|
nextUser: "",
|
description: "",
|
},
|
rules: {
|
nextUser: [
|
{
|
required: true,
|
message: "请选择审核人",
|
trigger: "blur",
|
},
|
],
|
},
|
prodData: {},
|
userList: [],
|
file: null,
|
title: "",
|
fileUrl: "",
|
resList: [],
|
uploadShow: false,
|
customShow: false,
|
customProd: null,
|
editShow: false,
|
editObj: undefined,
|
selectedRowKeys: [],
|
selectedRows: [],
|
spinning: false,
|
loading: false,
|
pageCurr: 1,
|
pageSize: 10,
|
total: 0,
|
y: 400,
|
update: -1,
|
webUrl: getWebUrl(),
|
conditions: {},
|
columns: [
|
{
|
title: "编号",
|
dataIndex: "parentCode",
|
key: "parentCode",
|
width: 130,
|
align: "center",
|
searchAble: true,
|
},
|
{
|
title: "型号",
|
dataIndex: "parentModel",
|
key: "parentModel",
|
align: "center",
|
width: 180,
|
searchAble: true,
|
},
|
{
|
title: "名称",
|
dataIndex: "parentName",
|
key: "parentName",
|
align: "center",
|
width: 180,
|
searchAble: true,
|
},
|
{
|
title: "定制单号",
|
dataIndex: "customCode",
|
key: "customCode",
|
align: "center",
|
width: 160,
|
searchAble: true,
|
},
|
{
|
title: "标准机型",
|
dataIndex: "isNormal",
|
dataType: "boolean",
|
align: "center",
|
searchAble: true,
|
width: 100,
|
scopedSlots: { customRender: "isNormal" },
|
},
|
{
|
title: "创建时间",
|
dataIndex: "createTime",
|
key: "createTime",
|
align: "center",
|
noSearch: true,
|
width: 160,
|
},
|
{
|
title: "版本号",
|
dataIndex: "version",
|
key: "version",
|
align: "center",
|
noSearch: true,
|
width: 160,
|
},
|
{
|
title: "操作",
|
dataIndex: "operation",
|
key: "operation",
|
align: "center",
|
width: 228,
|
fixed: "right",
|
scopedSlots: { customRender: "action" },
|
},
|
],
|
dataSource: [],
|
};
|
},
|
components: {
|
AdvanceTable,
|
ChangeParts,
|
ProdUpload,
|
DrawUpload,
|
},
|
methods: {
|
onSearch(conditions, searchOptions) {
|
// console.log(conditions);
|
// console.log(searchOptions);
|
this.pageCurr = 1;
|
this.conditions = conditions;
|
this.sendMessage();
|
},
|
onPageChange(page, pageSize) {
|
this.pageCurr = page;
|
this.pageSize = pageSize;
|
this.sendMessage();
|
},
|
onSizeChange(current, size) {
|
this.pageCurr = 1;
|
this.pageSize = size;
|
this.sendMessage();
|
},
|
onRefresh(conditions) {
|
this.conditions = conditions;
|
this.sendMessage();
|
},
|
onReset(conditions) {
|
this.conditions = conditions;
|
this.sendMessage();
|
},
|
goDetails(record) {
|
// console.log(record);
|
const { parentModel, customCode } = record;
|
this.$router.push({
|
path: "/resource/product-details",
|
query: { parentModel, customCode },
|
});
|
},
|
searchData(res) {
|
if (res) {
|
// res = res.data;
|
// console.log(res, "======");
|
let data = [];
|
let total = 0;
|
if (res.code && res.data) {
|
data = res.data2.list;
|
total = res.data2.total;
|
}
|
this.dataSource = data;
|
this.total = total;
|
if (-1 == this.update) {
|
this.update = Math.random();
|
}
|
}
|
},
|
edit(obj) {
|
console.log(obj, 99);
|
this.editObj = obj;
|
this.editShow = true;
|
},
|
download(obj) {
|
const { id, version } = obj;
|
downloadBom(id, version).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 ? 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("操作失败");
|
}
|
});
|
},
|
beforeUpload() {
|
return false;
|
},
|
uploadSoftware() {
|
let obj = {
|
approving: {
|
parentModel: this.prodData.parentModel,
|
},
|
main: {
|
nextUser: this.info.nextUser,
|
title: `为产品${this.prodData.parentModel}上传软件`,
|
description: this.info.description,
|
},
|
};
|
if (!this.file) {
|
this.$message.warning("请选择要上传的软件包");
|
return false;
|
}
|
this.$refs.formRef.validate((valid) => {
|
if (!valid) {
|
this.$message.error("存在未通过检验的表单项");
|
return false;
|
} else {
|
const formData = new FormData();
|
formData.append("multipartFile", this.file);
|
formData.append("mainDTOString", JSON.stringify(obj));
|
productSoftwareSubmit(formData)
|
.then((res) => {
|
// this.$layer.close(loadinobjobj
|
let rs = res.data;
|
if (rs.code == 1 && rs.data) {
|
this.resList = rs.data2;
|
this.title = rs.data3;
|
this.resShow = true;
|
this.$message.success(rs.msg);
|
} else {
|
this.$message.error(rs.msg);
|
}
|
})
|
.catch((error) => {
|
// this.$layer.close(loading);
|
console.log(error);
|
});
|
}
|
});
|
},
|
upload(record) {
|
this.prodData = record;
|
this.uploadShow = true;
|
},
|
uploadChange(data) {
|
const { file, fileList } = data;
|
if (fileList.length > 1) {
|
fileList.shift();
|
// console.log(file, fileList, "90909090");
|
}
|
if (fileList.length) {
|
// this.file = fileList[0];
|
// console.log(file == fileList[0], file == fileList[0].originFileObj)
|
this.file = fileList[0].originFileObj;
|
} else {
|
this.file = null;
|
}
|
},
|
uploadCancel() {
|
this.uploadShow = false;
|
},
|
cancel() {
|
this.editShow = false;
|
},
|
resize() {
|
setTimeout(() => {
|
this.update = Math.random();
|
}, 200);
|
},
|
onWSOpen() {
|
this.$nextTick(() => {
|
this.sendMessage();
|
});
|
},
|
sendMessage() {
|
if (!this.isWSOpen) {
|
return false;
|
}
|
const { pageCurr, pageSize, conditions, columns } = this;
|
let params = {};
|
Object.keys(conditions).forEach((v) => {
|
switch (v) {
|
case "isNormal":
|
if (conditions[v]) {
|
params["customCode"] = "";
|
columns.forEach((val) => {
|
if(val.dataIndex == 'customCode') {
|
val.search.value = '';
|
}
|
});
|
}
|
break;
|
case "customCode":
|
if (params["customCode"] == undefined) {
|
params[v] = conditions[v];
|
}
|
break;
|
default:
|
params[v] = conditions[v];
|
break;
|
}
|
});
|
let data = {
|
pageSize,
|
pageCurr,
|
...params,
|
};
|
console.log("=====9=", data, JSON.stringify(data));
|
this.SOCKET.send(JSON.stringify(data));
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
// // console.log(res, "=====111data");
|
this.searchData(res);
|
},
|
getUserByRoleId() {
|
if (this.roles[0].id == 1002) {
|
this.userList = this.generalManagerList.map((item) => item);
|
} else {
|
this.userList = this.projectManagerList.map((item) => item);
|
}
|
},
|
// 新增产品 bom导入
|
pordUploadChange(data) {
|
let loading = this.$layer.loading();
|
const formData = new FormData();
|
formData.append("file", data.file);
|
zipParse(formData)
|
.then((res) => {
|
this.$layer.close(loading);
|
let { code, data, data2, data3, msg } = res.data;
|
if (code && data) {
|
this.resList = data2;
|
this.title = data3;
|
this.fileUrl = msg;
|
this.prodUploadShow = true;
|
this.$message.success("解析成功");
|
} else {
|
this.$message.error(msg);
|
}
|
})
|
.catch((error) => {
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
prodUploadCancel() {
|
this.prodUploadShow = false;
|
},
|
submit(data) {
|
// console.log(data);
|
const { parentCode, parentModel, parentName } = this.resList[0];
|
const param = {
|
nextUser: data.nextUser,
|
description: data.description,
|
title: this.title,
|
productApproving: {
|
bomApprovingList: this.resList.map((v) => ({ ...v, id: undefined })),
|
fileUrl: this.fileUrl,
|
customCode: data.customCode,
|
parentCode,
|
parentModel,
|
parentName,
|
},
|
};
|
addProduct(param).then((res) => {
|
const { code, data, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
this.prodUploadShow = false;
|
} else {
|
this.$message.error(msg);
|
}
|
});
|
},
|
showCustom(obj) {
|
this.customProd = obj;
|
this.customShow = true;
|
},
|
custom(data) {
|
console.log(11);
|
const { id, parentCode, parentModel, parentName } = this.customProd;
|
const param = {
|
nextUser: data.nextUser,
|
description: data.description,
|
title: `对产品${parentName}的定制`,
|
productApproving: {
|
bomApprovingList: [
|
{
|
id,
|
},
|
],
|
customCode: data.customCode,
|
parentCode,
|
parentModel,
|
parentName,
|
},
|
};
|
addProduct(param).then((res) => {
|
const { code, data, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
this.customShow = false;
|
} else {
|
this.$message.error(msg);
|
}
|
});
|
},
|
customCancel() {
|
this.customShow = false;
|
},
|
activeFN() {
|
this.resize();
|
}
|
},
|
watch: {
|
update(n) {
|
if (-1 != n) {
|
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", [
|
"downloadFlag",
|
"roles",
|
"projectManagerList",
|
"generalManagerList",
|
]),
|
...mapGetters("setting", ["affixed"]),
|
},
|
mounted() {
|
this.getUserByRoleId();
|
this.sendMessage();
|
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;
|
}
|
}
|
.img-wraper {
|
width: 80px;
|
height: 50px;
|
.image-view {
|
width: 100%;
|
height: 100%;
|
/deep/img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
}
|
/deep/table {
|
table-layout: fixed;
|
}
|
.text-right {
|
text-align: right;
|
span::after {
|
content: ":";
|
position: relative;
|
top: -0.5px;
|
margin: 0 8px 0 2px;
|
}
|
}
|
.upload {
|
padding: 10px 0;
|
}
|
.modal-footer {
|
text-align: right;
|
button + button {
|
margin-left: 8px;
|
}
|
}
|
.mt8 {
|
margin-top: 8px;
|
}
|
</style>
|
