添加二维码直接下载

This commit is contained in:
jiang 2025-08-19 15:14:26 +08:00
parent 63442e3a15
commit 002205c39b
1 changed files with 992 additions and 907 deletions

View File

@ -81,7 +81,9 @@
<el-table-column label="规格型号" align="center" prop="materialModel" sortable show-overflow-tooltip />
<el-table-column label="设备编号" align="center" prop="maCode" sortable show-overflow-tooltip />
<el-table-column label="设备状态" align="center" prop="statusName" sortable show-overflow-tooltip />
<el-table-column label="固定资产编号" align="center" prop="assetsCode" width="200px" sortable show-overflow-tooltip >
<el-table-column label="固定资产编号" align="center" prop="assetsCode" width="200px" sortable
show-overflow-tooltip
>
<template slot-scope="scope">
<div style="display: flex; align-items: center; justify-content: center;">
<el-input
@ -105,11 +107,16 @@
</el-table-column>
<el-table-column label="绑定标签" align="center" prop="qrCode" sortable show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.qrCode!=null" style="color:blue; cursor: pointer" @click="handleViewQrCode(scope.row)">
{{ "查看" }}
<span v-if="scope.row.qrCode!=null" style="color:blue; cursor: pointer"
@click="handleViewQrCode(scope.row)"
>
{{ '查看' }}
</span>
<span v-if="scope.row.qrCode!=null" style="color:blue; cursor: pointer;margin-left: 10px" @click="downloadQrCode(scope.row)">
{{ '下载' }}
</span>
<span v-else>
{{ "暂无" }}
{{ '暂无' }}
</span>
</template>
</el-table-column>
@ -160,7 +167,9 @@
<el-row :gutter="24">
<el-col :span="7">
<el-form-item label="物品种类" prop="materialType">
<el-select v-model="form.materialType" placeholder="请选择物品种类" clearable style="width: 100%;" disabled>
<el-select v-model="form.materialType" placeholder="请选择物品种类" clearable style="width: 100%;"
disabled
>
<el-option
v-for="dict in keeperDataRange"
:key="dict.value"
@ -172,7 +181,9 @@
</el-col>
<el-col :span="7">
<el-form-item label="设备类型" prop="materialName">
<el-select v-model="form.materialName" placeholder="请选择设备类型" clearable style="width: 100%;" disabled>
<el-select v-model="form.materialName" placeholder="请选择设备类型" clearable style="width: 100%;"
disabled
>
<el-option
v-for="dict in keeperDataRange"
:key="dict.value"
@ -219,7 +230,8 @@
</el-col>
<el-col :span="7">
<el-form-item label="绑定标签" prop="qrCode">
<div id="qrcode" v-if="form.qrCode" style="display: flex;align-items: center;justify-content: center;" ref="codeItemTwo"
<div id="qrcode" v-if="form.qrCode" style="display: flex;align-items: center;justify-content: center;"
ref="codeItemTwo"
></div>
<span v-else>暂无</span>
</el-form-item>
@ -239,7 +251,9 @@
</el-col>
<el-col :span="7">
<el-form-item label="本次检验时间" prop="thisCheckTime">
<el-date-picker type="date" placeholder="选择日期" v-model="form.thisCheckTime" style="width: 100%;" disabled></el-date-picker>
<el-date-picker type="date" placeholder="选择日期" v-model="form.thisCheckTime" style="width: 100%;"
disabled
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
@ -247,7 +261,9 @@
<el-row :gutter="24">
<el-col :span="7">
<el-form-item label="下次检验时间" prop="nextCheckTime">
<el-date-picker type="date" placeholder="选择日期" v-model="form.nextCheckTime" style="width: 100%;" disabled></el-date-picker>
<el-date-picker type="date" placeholder="选择日期" v-model="form.nextCheckTime" style="width: 100%;"
disabled
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="7">
@ -264,7 +280,8 @@
</el-col>
<el-col :span="7">
<el-form-item label="出场时间" prop="outFacTime">
<el-date-picker type="date" placeholder="选择日期" v-model="form.outFacTime" style="width: 100%;"></el-date-picker>
<el-date-picker type="date" placeholder="选择日期" v-model="form.outFacTime" style="width: 100%;"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
@ -362,13 +379,17 @@
<el-dialog :title="titleSynch" :visible.sync="openSynch" width="500px" append-to-body @close="cancelSynch">
<el-form ref="formSynchParams" :model="formSynchParams" :inline="true">
<el-form-item prop="reportCode">
<el-input v-model="formSynchParams.reportCode" placeholder="请输入报告编号" maxlength="20" style="width: 340px"/>
<el-input v-model="formSynchParams.reportCode" placeholder="请输入报告编号" maxlength="20"
style="width: 340px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuerySynch">查询</el-button>
</el-form-item>
<div style="margin-top: 10px; height: 100px; text-align: center; ">
<img v-if="formSynchParams.pdf" src="../../../../assets/img/pdf.png" alt="暂无图片" @click="downloadPdf" style="max-width: 100%; max-height: 100%;" />
<img v-if="formSynchParams.pdf" src="../../../../assets/img/pdf.png" alt="暂无图片" @click="downloadPdf"
style="max-width: 100%; max-height: 100%;"
/>
</div>
</el-form>
@ -382,19 +403,31 @@
</template>
<script>
import { getListDevice,getDeviceDetail,editDevice,addDevice,delDevice,getDeviceType,getZichanType,getSynchReportCode,synchReport,editAssetsCode } from "@/api/ma/device";
import { getKeeperIds} from "@/api/ma/typeConfigKeeper";
import { getRepairIds } from "@/api/ma/typeConfigRepair";
import {
getUserTypeList,
} from "@/api/ma/base";
getListDevice,
getDeviceDetail,
editDevice,
addDevice,
delDevice,
getDeviceType,
getZichanType,
getSynchReportCode,
synchReport,
editAssetsCode
} from '@/api/ma/device'
import { getKeeperIds } from '@/api/ma/typeConfigKeeper'
import { getRepairIds } from '@/api/ma/typeConfigRepair'
import {
getUserTypeList
} from '@/api/ma/base'
import { downloadFile, downloadFileData } from '@/utils/download'
import { getToken } from '@/utils/auth'
import QRCode from 'qrcodejs2';
import html2canvas from 'html2canvas';
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
name: "Device",
dicts: ["ma_machine_status"],
name: 'Device',
dicts: ['ma_machine_status'],
data() {
return {
//
@ -402,20 +435,17 @@
loadingTwo: false,
// Id
showName: false,
//
showWarn: false,
//
single: true,
//
multiple: true,
//
showSearch: true,
showHouse: false,
@ -435,7 +465,7 @@
teamList: [],
teamTempList: [],
//
title: "",
title: '',
//
open: false,
//
@ -447,7 +477,7 @@
maStatus: null,
materialType: '',
materialName: '',
materialModel: '',
materialModel: ''
},
//
queryTeam: {
@ -455,7 +485,7 @@
pageSize: 10,
name: undefined,
sex: undefined,
teamId: undefined,
teamId: undefined
},
//
@ -463,57 +493,53 @@
//
open: false,
//
title: "",
title: '',
//
isUploading: false,
//
updateSupport: 0,
//
headers: { Authorization: "Bearer " + getToken() },
headers: { Authorization: 'Bearer ' + getToken() },
//
url: process.env.VUE_APP_BASE_API + "/material/engineering/excelUpload"
url: process.env.VUE_APP_BASE_API + '/material/engineering/excelUpload'
},
//
form: {
qrCode: "",
qrCode: '',
keeperArr: [],
repairerArr: [],
keeperNameArr: [],
repairerNameArr: [],
repairerNameArr: []
},
//
rules: {
},
rules: {},
uploadOpen: false,
rowObj: {},
qrCode:"",
qrCode: '',
qrcodeUrl: '',
KeeperOptions: [],
sortedKeeperOptions: [],
repairerOptions: [],
sortedRepairerOptions: [],
titleSynch: "", //
titleSynch: '', //
openSynch: false, //
synchLoading: false, //loading
formSynchParams: { //
reportCode: "", //
pdf: "", //pdf
pdfName: "", //pdf
reportCode: '', //
pdf: '', //pdf
pdfName: '' //pdf
},
dataSynch: {}, //
};
dataSynch: {} //
}
},
created() {
this.getZichanType();
this.getDeviceType();
this.getKeeperData();
this.getRepairerData();
this.getList();
this.getZichanType()
this.getDeviceType()
this.getKeeperData()
this.getRepairerData()
this.getList()
},
// watch: {
// // form.qrCode
@ -528,102 +554,101 @@
// },
methods: {
async getKeeperData() {
const itemName = "ku_guan_role_ids";
const itemName = 'ku_guan_role_ids'
let roleIdsTemp = []
await getKeeperIds(itemName).then((response) => {
const roleIds = response.rows[response.rows.length - 1].itemValue
.split(",")
.map((item) => Number(item));
roleIdsTemp = roleIds;
});
.split(',')
.map((item) => Number(item))
roleIdsTemp = roleIds
})
await getUserTypeList(roleIdsTemp.join(',')).then((response) => {
this.KeeperOptions = response.rows;
});
this.KeeperOptions = response.rows
})
},
async getRepairerData() {
const itemName = "wei_xiu_role_ids";
const itemName = 'wei_xiu_role_ids'
let roleIdsTemp = []
await getRepairIds(itemName).then((response) => {
const roleIds = response.rows[response.rows.length - 1].itemValue
.split(",")
.map((item) => Number(item));
roleIdsTemp = roleIds;
});
.split(',')
.map((item) => Number(item))
roleIdsTemp = roleIds
})
await getUserTypeList(roleIdsTemp.join(',')).then((response) => {
this.repairerOptions = response.rows;
this.repairerOptions = response.rows
console.log('4444', this.repairerOptions)
});
})
},
getDeviceType() {
getDeviceType({ level: 2, skipPermission: 1 }).then(response => {
let matTypeRes = response.data;
let matTypeRes = response.data
this.materialTypeList = matTypeRes.map((item) => {
return {
label: item.typeName,
value: item.typeId,
};
});
});
value: item.typeId
}
})
})
getDeviceType({ level: 3, skipPermission: 1 }).then(response => {
let matNameRes = response.data;
let matNameRes = response.data
this.materialNameList = matNameRes.map((item) => {
return {
label: item.typeName,
value: item.typeId,
};
});
});
value: item.typeId
}
})
})
getDeviceType({ level: 4, skipPermission: 1 }).then(response => {
let matModelRes = response.data;
let matModelRes = response.data
this.materialModelList = matModelRes.map((item) => {
return {
label: item.typeName,
value: item.typeId,
};
});
});
value: item.typeId
}
})
})
},
//
getZichanType() {
getZichanType({ isAll: 1 }).then(response => {
let matTypeRes = response.data;
let matTypeRes = response.data
this.ZichanTypeList = matTypeRes.map((item) => {
return {
label: item.assetName,
value: item.id,
};
});
});
value: item.id
}
})
})
},
/** 查询岗位列表 */
getList() {
this.loading = true;
this.loading = true
getListDevice(this.queryParams).then(response => {
this.deviceList = response.rows;
this.total = response.total;
this.loading = false;
});
this.deviceList = response.rows
this.total = response.total
this.loading = false
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
this.queryParams.pageNum = 1
this.getList()
},
//
handleAssetsCodeChange(row) {
if (!row.assetsCode) {
this.$message.error('请输入资产编号');
this.$message.error('请输入资产编号')
} else {
editAssetsCode(row).then(response => {
this.$message.success('固定资产录入成功');
this.getList();
});
this.$message.success('固定资产录入成功')
this.getList()
})
}
},
@ -631,46 +656,46 @@
this.reset()
const maId = row.maId
getDeviceDetail(maId).then((response) => {
this.form = response.data;
this.form = response.data
if (response.data.keeperId) {
const keeperIds = response.data.keeperId.split(',');
const keeperIds = response.data.keeperId.split(',')
// keeperIds KeeperOptions keeper
const keepers = keeperIds.map((id) =>
this.KeeperOptions.find((keeper) => keeper.userId + '' === id)
).filter(Boolean); // keeper
).filter(Boolean) // keeper
// keeperName
keepers.sort((a, b) =>
a.nickName.localeCompare(b.nickName, 'zh-CN')
);
)
// keeperId
this.form.keeperArr = keepers.map((keeper) => keeper.userId + '');
this.form.keeperArr = keepers.map((keeper) => keeper.userId + '')
} else {
this.form.keeperArr = []; //
this.form.keeperArr = [] //
}
if (response.data.repairId) {
const repairerIds = response.data.repairId.split(',');
const repairerIds = response.data.repairId.split(',')
// keeperIds KeeperOptions keeper
const repairers = repairerIds.map((id) =>
this.repairerOptions.find((repairer) => repairer.userId + '' === id)
).filter(Boolean); // keeper
).filter(Boolean) // keeper
// keeperName
repairers.sort((a, b) =>
a.nickName.localeCompare(b.nickName, 'zh-CN')
);
)
// keeperId
this.form.repairerArr = repairers.map((repairer) => repairer.userId + '');
this.form.repairerArr = repairers.map((repairer) => repairer.userId + '')
} else {
this.form.repairerArr = []; //
this.form.repairerArr = [] //
}
if (this.form.qrCode) {
this.generateQRCode(this.form.qrCode);
this.generateQRCode(this.form.qrCode)
// URL
} else {
this.qrcodeUrl = '';
this.qrcodeUrl = ''
}
this.showHouse = true
this.title = '修改'
@ -681,46 +706,46 @@
this.reset()
const maId = row.maId
getDeviceDetail(maId).then((response) => {
this.form = response.data;
this.form = response.data
if (response.data.keeperId) {
const keeperIds = response.data.keeperId.split(',');
const keeperIds = response.data.keeperId.split(',')
// keeperIds KeeperOptions keeper
const keepers = keeperIds.map((id) =>
this.KeeperOptions.find((keeper) => keeper.userId + '' === id)
).filter(Boolean); // keeper
).filter(Boolean) // keeper
// keeperName
keepers.sort((a, b) =>
a.nickName.localeCompare(b.nickName, 'zh-CN')
);
)
// keeperId
this.form.keeperArr = keepers.map((keeper) => keeper.userId + '');
this.form.keeperArr = keepers.map((keeper) => keeper.userId + '')
} else {
this.form.keeperArr = []; //
this.form.keeperArr = [] //
}
if (response.data.repairId) {
const repairerIds = response.data.repairId.split(',');
const repairerIds = response.data.repairId.split(',')
// keeperIds KeeperOptions keeper
const repairers = repairerIds.map((id) =>
this.repairerOptions.find((repairer) => repairer.userId + '' === id)
).filter(Boolean); // keeper
).filter(Boolean) // keeper
// keeperName
repairers.sort((a, b) =>
a.nickName.localeCompare(b.nickName, 'zh-CN')
);
)
// keeperId
this.form.repairerArr = repairers.map((repairer) => repairer.userId + '');
this.form.repairerArr = repairers.map((repairer) => repairer.userId + '')
} else {
this.form.repairerArr = []; //
this.form.repairerArr = [] //
}
if (this.form.qrCode) {
this.generateQRCode(this.form.qrCode);
this.generateQRCode(this.form.qrCode)
// URL
} else {
this.qrcodeUrl = '';
this.qrcodeUrl = ''
}
this.showHouse = true
this.title = '查看'
@ -737,43 +762,43 @@
height: 55,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
correctLevel: QRCode.CorrectLevel.H
})
}, 500)
},
//
reset() {
this.form = {};
this.resetForm("form");
this.form = {}
this.resetForm('form')
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.keyWord=null;
this.queryParams.maStatus=null;
this.handleQuery();
this.resetForm('queryForm')
this.queryParams.keyWord = null
this.queryParams.maStatus = null
this.handleQuery()
},
//** */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.maId != undefined) {
editDevice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.showHouse = false;
this.getList();
});
this.$modal.msgSuccess('修改成功')
this.showHouse = false
this.getList()
})
}
}
});
})
},
//
cancel() {
this.showHouse = false;
this.reset();
this.showHouse = false
this.reset()
},
/** 删除按钮操作 */
@ -788,7 +813,8 @@
this.$modal.msgSuccess('删除成功')
this.getList()
})
.catch(() => {})
.catch(() => {
})
},
//
@ -805,11 +831,68 @@
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
correctLevel: QRCode.CorrectLevel.H
})
}, 500)
},
downloadQrCode(row) {
try {
//
const codeQrContainer = document.createElement('div')
codeQrContainer.style.textAlign = 'center'
document.body.appendChild(codeQrContainer)
//
const uploadImgContainer = document.createElement('div')
uploadImgContainer.className = 'uploadImg'
codeQrContainer.appendChild(uploadImgContainer)
//
const qrcodeContainer = document.createElement('div')
qrcodeContainer.className = 'qrcode'
uploadImgContainer.appendChild(qrcodeContainer)
// 使 qrcodejs2
new QRCode(qrcodeContainer, {
text: row.qrCode,
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
//
const boxCodeContainer = document.createElement('div')
boxCodeContainer.className = 'boxCode'
boxCodeContainer.innerText = `设备编号:${row.maCode || '未知'}`
codeQrContainer.appendChild(boxCodeContainer)
// CSS
codeQrContainer.style.display = 'flex'
codeQrContainer.style.flexDirection = 'column'
codeQrContainer.style.alignItems = 'center'
codeQrContainer.style.justifyContent = 'center'
codeQrContainer.style.width = '400px'
codeQrContainer.style.height = '400px'
console.log(codeQrContainer)
html2canvas(codeQrContainer).then((canvas) => {
// canvasURL
const image = canvas.toDataURL('image/png')
const alink = document.createElement('a')
alink.href = image
alink.download = row.qrCode
alink.click()
})
this.$message.success('二维码下载成功')
} catch (error) {
console.error('二维码生成失败:', error)
this.$message.error('二维码下载失败,请重试')
}
},
//
downloadCode(e) {
if (document.getElementById('qrcode').childNodes[0]) {
@ -835,54 +918,54 @@
//
handleSynch() {
this.titleSynch = "检验报告同步";
this.openSynch = true;
this.titleSynch = '检验报告同步'
this.openSynch = true
},
handleQuerySynch() {
const params = {
reportCode: this.formSynchParams.reportCode,
reportCode: this.formSynchParams.reportCode
}
getSynchReportCode(params).then((response) => {
let data = response.data;
this.dataSynch = data;
let data = response.data
this.dataSynch = data
if (data.pdf) {
this.formSynchParams.pdf = data.pdf;
this.formSynchParams.pdfName = data.reportName;
this.formSynchParams.pdf = data.pdf
this.formSynchParams.pdfName = data.reportName
} else {
this.formSynchParams.pdf = "";
this.formSynchParams.pdfName = "";
this.$message.error('该报告编号暂无文件');
this.formSynchParams.pdf = ''
this.formSynchParams.pdfName = ''
this.$message.error('该报告编号暂无文件')
}
})
},
downloadPdf() {
if (this.formSynchParams.pdf) {
const link = document.createElement('a');
link.href = this.formSynchParams.pdf;
const link = document.createElement('a')
link.href = this.formSynchParams.pdf
// URL 使
const fileName = this.formSynchParams.pdfName;
link.download = fileName;
const fileName = this.formSynchParams.pdfName
link.download = fileName
//
link.target = '_blank';
link.target = '_blank'
//
document.body.appendChild(link);
link.click();
document.body.appendChild(link)
link.click()
//
document.body.removeChild(link);
document.body.removeChild(link)
}
},
cancelSynch() {
this.openSynch = false;
this.openSynch = false
this.formSynchParams = { //
reportCode: "", //
pdf: "", //pdf
pdfName: "", //pdf
};
this.dataSynch = {};
reportCode: '', //
pdf: '', //pdf
pdfName: '' //pdf
}
this.dataSynch = {}
},
//
@ -893,21 +976,21 @@
pdf: this.dataSynch.pdf,
reportName: this.dataSynch.reportName,
reportNum: this.dataSynch.reportNum,
samples: this.dataSynch.samples,
};
samples: this.dataSynch.samples
}
synchReport(params).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess(response.msg);
this.openSynch = false;
this.$modal.msgSuccess(response.msg)
this.openSynch = false
this.formSynchParams = {
reportCode: "",
pdf: "",
pdfName: "",
};
this.dataSynch = {};
reportCode: '',
pdf: '',
pdfName: ''
}
this.getList();
this.dataSynch = {}
}
this.getList()
})
}
@ -917,27 +1000,29 @@
// }, `_${new Date().getTime()}.xlsx`)
// },
}
};
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
//css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
.uploadImg {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.boxCode {
margin-top: 10px;
padding-bottom: 20px;