haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

手环管理二维码，人员管理

This commit is contained in:
jjLv 2024-08-06 14:31:46 +08:00
parent 3481020281
commit bd87076407
5 changed files with 206 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/base/staff.js
View File

@ -69,7 +69,7 @@ export function updateCertificate(data) {
'Content-Type': 'multipart/form-data'
},
url: '/bracelet/person/updateCertificate',
method: 'put',
method: 'post',
data: data
})
}

186
src/views/base/bracelet/index.vue
View File

@ -326,20 +326,15 @@
>新增手环箱</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExportTemp"
v-hasPermi="['basic:bracelet:export']"
>导出二维码</el-button>
<!-- 二维码导出组件按钮在内部传选中数组 currentSelection:选中数组 clearCheck:清空选中状态-->
<qrCodeUpload :checkboxModel.sync="currentSelection" @clearCheck="clearCheck"/>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getboxList"></right-toolbar>
</el-row>
<el-table v-loading="loadingFive" :data="shboxallList">
<el-table v-loading="loadingFive" :data="shboxallList" ref="multipleTable" row-key="shboxCode" @selection-change="handleSelectionChangeImag" @select="handlerSelect" @select-all="handlerSelectAll">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="手环箱id" align="center" prop="shboxId" v-if="false" />
<el-table-column label="手环箱名称" align="center" prop="shboxName" />
<el-table-column label="手环箱编码" align="center" prop="shboxCode" />
@ -363,7 +358,7 @@
size="mini"
type="text"
icon="el-icon-edit"
@click="handleQuertPage(scope.row)"
@click="labelUploadCode(scope.row)"
v-hasPermi="['basic:bracelet:query']"
>查看</el-button>
</template>
@ -487,7 +482,7 @@
<!-- 手环绑定选择弹窗 -->
<el-dialog :title="title" :visible.sync="openSh" width="600px" height="600px" append-to-body>
<div> 当前手环箱还可以绑定{{ this.numers }}个手环</div>
<el-table v-loading="loadingSeven" :data="shListNoBind" width="600px" height = "400px" @selection-change="handleSelectionChange" >
<el-table v-loading="loadingSeven" :data="shListNoBind" width="600px" height = "400px" class="order" @selection-change="handleSelectionChange" >
<el-table-column type="selection" width="55" align="center" label="选择" :selectable="selectable" />
<el-table-column label="手环id" align="center" prop="shId" v-if="false" />
@ -586,6 +581,27 @@
</div>
</el-dialog>
<!-- 标签下载对话框 -->
<el-dialog
:title="title"
:visible.sync="uploadOpen"
width="450px"
append-to-body
:close-on-click-modal="false"
>
<div style="text-align: center" ref="codeBox">
<div class="uploadImg">
<div id="qrcode" class="qrcode" ref="codeItem"></div>
<!-- <img src="" alt="">-->
</div>
<div class="shboxCodeTemp">手环箱编号：{{ rowObj.shboxCode }}</div>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="downloadCode"
>下 载</el-button
>
</div>
</el-dialog>
</div>
</el-tab-pane>
</el-tabs>
@ -597,12 +613,18 @@
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
import qrCodeUpload from '../../components/qrCodeUpload.vue'
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
import uploadFile from '../../components/uploadFile.vue'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import C from "highlight.js/lib/languages/1c";
export default {
name: "Post",
dicts: ['sys_normal_disable','sys_sh_status'],
components: {
uploadFile
uploadFile,qrCodeUpload
},
data() {
return {
@ -623,6 +645,7 @@
loadingSeven:true,
// 选中数组
ids: [],
idsbox: [],
// 非单个禁用
single: true,
// 非多个禁用
@ -663,6 +686,12 @@
zero:0,
shboxbindId:0,
Qrcode:"",
//二维码
rowObj:{},
uploadOpen:false,
shboxCodeTemp:'',
// 查询参数
queryParams: {
pageNum: 1,
@ -761,6 +790,8 @@
//图片查看弹窗
dialogImageUrl: '',
dialogVisible: false,
maxLength:100,//已选列表上限，防止数据过多请求报错
currentSelection:[],//已选列表
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
@ -937,6 +968,96 @@
this.single = selection.length!=1
this.multiple = !selection.length
},
// 多选框选中数据二维码导出
handleSelectionChangeImag(selection) {
this.ids = selection.map(item => item.shboxCode);
this.single = selection.length!=1
this.multiple = !selection.length
},
//单选操作-跨页
handlerSelect(val, row) {
this.currentSelection.indexOf(row.shboxCode) === -1
? this.currentSelection.push(row.shboxCode)
: this.currentSelection.splice(this.currentSelection.indexOf(row.shboxCode), 1)
},
//全选操作-跨页
handlerSelectAll(val) {
if (val.length) {
// 进来此处说明:
// 1 当前页的全选 2 其他页有数据然后当前页的取消全选
// 比较全选或者取消全选与当前页的数据，得到差集
// 如果tableData中的数据在val中不存在，则说明是取消全选，需要从currentSelection中移除
// 如果tableData中所有的数据都在val中存在，则说明是全选，需要将差集添加到currentSelection中
const isAllSelect = this.tableData.every(item =>
val.some(valItem => valItem.shboxCode === item.shboxCode)
)
if (isAllSelect) {
// 全选中新增的差集
const diff = val.filter(
item => !this.currentSelection.some(shboxCode => shboxCode === item.shboxCode)
)
if (this.currentSelection.length + diff.length > this.maxLength) {
this.currentSelection = this.currentSelection.concat(
diff.splice(0, this.maxLength - this.currentSelection.length)
.map(item => item.shboxCode))
diff.forEach(item => this.$refs.multipleTable.toggleRowSelection(item, false))
} else {
this.currentSelection = this.currentSelection.concat(diff.map(item => item.shboxCode))
}
} else {
this.currentSelection = this.currentSelection.filter(
shboxCode => !this.tableData.some(item => item.shboxCode === shboxCode)
)
}
} else {
// 进来此处说明:
// 其他页并无勾选数据，且当前页取消勾选
this.currentSelection = []
}
},
clearCheck(){
console.log("clearCheck")
this.currentSelection = []
this.getboxList()
},
//二维码查看
labelUploadCode(row) {
this.rowObj = row
this.uploadOpen = true
this.title = '二维码查看'
this.shboxCodeTemp = row.shboxCode
let str = row.shboxCode
this.$nextTick(() => {
// this.selectionList.forEach((item, index) => {
this.$refs.codeItem.innerHTML = ''
var qrcode = new QRCode(this.$refs.codeItem, {
text: str, //二维码内容
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
})
// });
}, 500)
},
downloadCode(e) {
if (document.getElementById('qrcode').childNodes[0]) {
let element = this.$refs.codeBox
html2canvas(element).then((canvas) => {
// 将canvas转换为图片URL
const image = canvas.toDataURL('image/png')
const alink = document.createElement('a')
alink.href = image
alink.download = this.shboxCodeTemp
alink.click()
})
}
},
/** 解除绑定操作 */
handleDelSh(row) {
console.log(row)
@ -969,21 +1090,6 @@
}).catch(() => {});
},
handleQuertPage(row){
const qrCodeData = {
"设备类型": row.deviceType,
"设备名称": row.deviceName,
"设备编号": row.deviceCode,
"设备状态": row.deviceStatus,
};
const qrCodeString = JSON.stringify(qrCodeData, null, 2);
console.log(qrCodeString);
//清空二维码容器
// Qrcode = "";
// // 生成二维码
// Qrcode.qrcode(utf16to8(qrCodeString));
this.open = true;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
@ -1288,6 +1394,19 @@
console.log(this.shboxallList)
this.total = response.total;
this.loadingFive = false;
if (this.currentSelection.length) {
this.$nextTick(() => {
this.currentSelection.forEach(row => {
this.tableData.forEach(item => {
if (item.shboxCode === row) {
this.$refs.multipleTable?.toggleRowSelection(item, true)
}
})
})
})
} else {
this.$refs.multipleTable?.clearSelection()
}
});
},
@ -1413,13 +1532,24 @@
width: 60px !important;
margin-bottom: 10px;
}
.uploadImg {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.shboxCodeTemp {
margin-top: 10px;
padding-bottom: 20px;
font-size: 18px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
::v-deep .el-table__header-wrapper .el-checkbox {
::v-deep.order .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>

29
src/views/base/device/index.vue
View File

@ -74,7 +74,7 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="deviceId" @selection-change="handleSelectionChange" @select="handlerSelect" @select-all="handlerSelectAll">
<el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="deviceCode" @selection-change="handleSelectionChange" @select="handlerSelect" @select-all="handlerSelectAll">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="设备id" align="center" prop="deviceId" v-if="false" />
<el-table-column label="设备类型" align="center" prop="deviceType">
@ -279,7 +279,7 @@
this.$nextTick(() => {
this.currentSelection.forEach(row => {
this.tableData.forEach(item => {
if (item.deviceId === row) {
if (item.deviceCode === row) {
this.$refs.multipleTable?.toggleRowSelection(item, true)
}
})
@ -315,15 +315,15 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.deviceId)
this.ids = selection.map(item => item.deviceCode)
this.single = selection.length!=1
this.multiple = !selection.length
},
//单选操作-跨页
handlerSelect(val, row) {
this.currentSelection.indexOf(row.deviceId) === -1
? this.currentSelection.push(row.deviceId)
: this.currentSelection.splice(this.currentSelection.indexOf(row.deviceId), 1)
this.currentSelection.indexOf(row.deviceCode) === -1
? this.currentSelection.push(row.deviceCode)
: this.currentSelection.splice(this.currentSelection.indexOf(row.deviceCode), 1)
},
//全选操作-跨页
handlerSelectAll(val) {
@ -334,24 +334,24 @@
// 如果tableData中的数据在val中不存在，则说明是取消全选，需要从currentSelection中移除
// 如果tableData中所有的数据都在val中存在，则说明是全选，需要将差集添加到currentSelection中
const isAllSelect = this.tableData.every(item =>
val.some(valItem => valItem.deviceId === item.deviceId)
val.some(valItem => valItem.deviceCode === item.deviceCode)
)
if (isAllSelect) {
// 全选中新增的差集
const diff = val.filter(
item => !this.currentSelection.some(deviceId => deviceId === item.deviceId)
item => !this.currentSelection.some(deviceCode => deviceCode === item.deviceCode)
)
if (this.currentSelection.length + diff.length > this.maxLength) {
this.currentSelection = this.currentSelection.concat(
diff.splice(0, this.maxLength - this.currentSelection.length)
.map(item => item.deviceId))
.map(item => item.deviceCode))
diff.forEach(item => this.$refs.multipleTable.toggleRowSelection(item, false))
} else {
this.currentSelection = this.currentSelection.concat(diff.map(item => item.deviceId))
this.currentSelection = this.currentSelection.concat(diff.map(item => item.deviceCode))
}
} else {
this.currentSelection = this.currentSelection.filter(
deviceId => !this.tableData.some(item => item.deviceId === deviceId)
deviceCode => !this.tableData.some(item => item.deviceCode === deviceCode)
)
}
} else {
@ -455,6 +455,13 @@
const param = {
deviceId:row.deviceId
}
if (row.lyName!=null && row.lyName!='') {
this.$alert('存在领用人，无法删除', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
return;
}
this.$modal.confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项？').then(function() {
return delDevice(param);
}).then(() => {

42
src/views/base/staff/index.vue
View File

@ -183,7 +183,7 @@
:on-change="handleChangeElectricianImgList"
:class="{ disabled: uploadDisabled }"
:on-preview="picturePreview"
:on-remove="handleRemoveHighImgList"
:on-remove="handleRemoveElectricianImgList"
>
<i
class="el-icon-plus avatar-uploader-icon"
@ -352,11 +352,7 @@
//图片上传
fileList: [],
//证书上传
certificateForm: {},
highImgList: [],
electricianImgList: [],
elseImgList: [],
certificateForm: {},
delHighFileIdList: [],
delElectFileIdList: [],
@ -610,6 +606,7 @@
}
});
},
//提交时循环fileList 获取raw文件
getFileData() {
const file = []
@ -704,40 +701,42 @@
this.$refs.upload.submit();
},
//打开证书上传
openCertificate(row){
this.memberId = row.id;
this.highImgList = [];
this.electricianImgList = [];
this.elseImgList = [];
// this.showCertificate = true;
getCertificate(this.memberId).then(response => {
response.data.highImgList.forEach(item => {
this.highImgList.push({
fileId: item.filePath,
raw:item.bast64Image,
url: item.bast64Image
})
});
response.data.electricianImgList.forEach(item => {
this.electricianImgList.push({
fileId: item.filePath,
raw:item.bast64Image,
url: item.bast64Image
})
});
response.data.elseImgList.forEach(item => {
this.elseImgList.push({
fileId: item.filePath,
raw:item.bast64Image,
url: item.bast64Image
})
});
response.data.highImgList = [];
response.data.electricianImgList = [];
response.data.elseImgList = [];
// console.log(this.highImgList)
// console.log(this.electricianImgList)
// console.log(this.elseImgList)
setTimeout(()=>{
this.showCertificate = "证书";
this.showCertificate = true;
},100)
});
},
@ -757,12 +756,24 @@
if (valid) {
const reqData = new FormData();
this.certificateForm.delHighFileIdList = this.delHighFileIdList;
console.log(this.delHighFileIdList);
this.certificateForm.delElectFileIdList = this.delElectFileIdList;
this.certificateForm.delElseFileIdList = this.delElseFileIdList;
response.append('delHighFileIdList', this.delHighFileIdList);
response.append('delElectFileIdList', this.delElectFileIdList);
response.append('delElseFileIdList', this.delElseFileIdList);
// reqData.append('delHighFileIdList', JSON.stringify(this.delHighFileIdList));
// reqData.append('delElectFileIdList', JSON.stringify(this.delElectFileIdList));
// reqData.append('delElseFileIdList', JSON.stringify(this.delElseFileIdList));
this.delHighFileIdList.forEach(item => {
reqData.append('delHighFileIdList', item)
});
this.delElectFileIdList.forEach(item => {
reqData.append('delElectFileIdList', item)
});
this.delElseFileIdList.forEach(item => {
reqData.append('delElseFileIdList', item)
});
const { highfile } = this.getHighImgListFileData();
// console.log(highfile);
const { electfile } = this.getElectricianImgListFileData();
const { elsefile } = this.getElseImgListFileData();
reqData.append('id', this.memberId);
@ -781,6 +792,9 @@
this.highImgList=[];
this.electricianImgList=[];
this.elseImgList=[];
this.delHighFileIdList=[];
this.delElectFileIdList=[];
this.delElseFileIdList=[];
this.getList();
});
}

2
src/views/components/qrCodeUpload.vue
View File

@ -74,7 +74,7 @@ export default {
width = shareContent.offsetWidth,
height = shareContent.offsetHeight
const maCodeText = document.createElement('div')
maCodeText.innerHTML = '设备编码:' + element
maCodeText.innerHTML = '编码:' + element
maCodeText.style =
'font-size=18px; width:100%;text-align:center;margin:10px;'
shareContent.appendChild(maCodeText)