lj-zhgd-htweb/src/views/base/bracelet/index.vue

1631 lines
57 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-tabs v-model="activeName" @tab-click="handleClick" class="app-container">
<el-tab-pane label="手环管理" name="first" onclick="handleQuery">
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item prop="shCode">
<el-input
v-model="queryParams.shCode"
placeholder="请输入手环编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="shboxName">
<el-input
v-model="queryParams.shboxName"
placeholder="请输入手环箱名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="shboxCode">
<el-input
v-model="queryParams.shboxCode"
placeholder="请输入手环箱编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="shPersonName">
<el-input
v-model="queryParams.shPersonName"
placeholder="请输入使用人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="shStatus">
<el-select v-model="queryParams.shStatus" placeholder="状态" clearable style="width: 100%;">
<el-option
v-for="dict in dict.type.sys_sh_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="openShbox"
v-hasPermi="['basic:bracelet:add']"
>新增手环</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['basic:bracelet:export']"
>导出数据</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="braceletList">
<el-table-column label="手环id" align="center" prop="shId" v-if="false" />
<el-table-column label="手环编码" align="center" prop="shCode" />
<el-table-column label="所属手环箱" align="center" prop="shboxName" >
<template slot-scope="scope">
<div v-if="scope.row.shboxName!=boxName" >
{{ scope.row.shboxName }}
<el-button
size="mini"
type="text"
icon="el-icon-edit"
style="color: red ;"
@click="handleDelSh(scope.row)"
v-hasPermi="['basic:bracelet:edit']"
>解绑</el-button>
</div>
<div v-if="scope.row.shboxName==boxName" >
{{ scope.row.shboxName }}
<el-button
size="mini"
type="text"
style="color: green ;"
icon="el-icon-link"
@click="openShboxTemp(scope.row)"
v-hasPermi="['basic:bracelet:edit']"
>绑定</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="手环状态" align="center" prop="shStatus" >
<template slot-scope="scope">
<div v-if="scope.row.shStatus==0" style="color: green;">{{ stateList[Number(scope.row.shStatus)] }}</div>
<div v-if="scope.row.shStatus==1" style="color: red;">{{ stateList[Number(scope.row.shStatus)] }}</div>
</template>
</el-table-column>
<el-table-column label="使用人" align="center" prop="shPersonName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['basic:bracelet:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
@click="handleAddAttribute(scope.row)"
v-hasPermi="['basic:bracelet:edit']"
>新增设备属性</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['basic:bracelet:del']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 手环弹窗 -->
<el-dialog :title="title" :visible.sync="showsh" width="600px" height="600px" append-to-body>
<el-form :model="queryshCode" ref="queryshCode" :rules="rules" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="手环编码" prop="shCode">
<el-input
v-model="queryshCode.shCode"
placeholder="请输入手环编码"
/>
</el-form-item>
</el-form>
<el-table v-loading="loadingTwo" :data="shboxList" width="600px" height = "400px" >
<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" />
<el-table-column label="已绑手环" align="center" prop="shboxBindNum" >
<template slot-scope="scope">
<div>
<span style="color: green;">{{ scope.row.shboxBindNum }}/</span><span>{{ scope.row.shboxCapacity }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="选择" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<input type="radio" name="radioOne" value="1" v-model="radioOne" @click="getShboxBindName($event,scope.row)"/>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
<pagination
v-show="totalTwo>0"
:total="totalTwo"
:page.sync="queryshCode.pageNum"
:limit.sync="queryshCode.pageSize"
@pagination="getListTemp"
/>
</el-dialog>
<!-- 手环绑定选择弹窗 -->
<el-dialog :title="title" :visible.sync="showshBind" width="600px" height="600px" append-to-body>
<el-form :model="queryshCodeBind" ref="queryshCodeBind" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item prop="keyword">
<el-input
v-model="queryshCodeBind.keyword"
placeholder="请输入关键词"
clearable
@keyup.enter.native="handleQueryBind"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryBind">查询</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loadingThree" :data="shboxListBind" width="600px" height = "400px" >
<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" />
<el-table-column label="已绑手环" align="center" prop="shboxBindNum" >
<template slot-scope="scope">
<div>
<span style="color: green;">{{ scope.row.shboxBindNum }}/</span><span>{{ scope.row.shboxCapacity }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="选择" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<input type="radio" name="radioTwo" value="1" v-model="radioTwo" @click="getShboxBindName($event,scope.row)"/>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormBind">确 定</el-button>
<el-button @click="cancelBind">取 消</el-button>
</div>
<pagination
v-show="totalThree>0"
:total="totalThree"
:page.sync="queryshCodeBind.pageNum"
:limit.sync="queryshCodeBind.pageSize"
@pagination="getListBind"
/>
</el-dialog>
<!-- 修改手环弹窗 -->
<el-dialog :title="title" :visible.sync="showShEdit" width="600px" height="600px" append-to-body>
<el-form :model="queryshEdit" ref="queryshEdit" :rules="rules" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="手环编码" prop="shCode">
<el-input
v-model="queryshEdit.shCode"
placeholder="请输入手环编码"
/>
</el-form-item>
</el-form>
<el-table v-loading="loadingFour" :data="shboxList" width="600px" height = "400px" >
<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" />
<el-table-column label="已绑手环" align="center" prop="shboxBindNum" >
<template slot-scope="scope">
<div>
<span style="color: green;">{{ scope.row.shboxBindNum }}/</span><span>{{ scope.row.shboxCapacity }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="选择" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<input type="radio" name="radio" :checked="shboxId==scope.row.shboxId" @click="getShboxNameEdit($event,scope.row)"/>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormEdit">确 定</el-button>
<el-button @click="cancelEdit">取 消</el-button>
</div>
<pagination
v-show="totalTwo>0"
:total="totalTwo"
:page.sync="queryshEdit.pageNum"
:limit.sync="queryshEdit.pageSize"
@pagination="getListShEdit"
/>
</el-dialog>
<!-- 新增设备属性弹窗 -->
<el-dialog :title="title" :visible.sync="showAttribute" width="600px" append-to-body>
<el-form ref="formThree" :model="formThree" :rules="rulesShAttribute" label-width="120px" >
<el-row :gutter="24">
<el-col :span="20">
<el-form-item label="设备属性名称" prop="dataName">
<el-input v-model="formThree.dataName" placeholder="请输入设备属性名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="20">
<el-form-item label="设备采集值" prop="dataVal">
<el-input v-model="formThree.dataVal" placeholder="请输入设备采集值" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="20">
<el-form-item label="设备值单位" prop="dataUnit">
<el-input v-model.number="formThree.dataUnit" placeholder="请输入手环箱容量" >
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="20">
<el-form-item label="级联编码" prop="dataCode">
<el-input v-model.number="formThree.dataCode" placeholder="请输入级联编码" >
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormAttribute">确 定</el-button>
<el-button @click="cancelAttribute">取 消</el-button>
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="手环箱管理" name="second" onclick="handleQueryShbox">
<div class="app-container">
<el-form :model="queryShbox" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item prop="shboxName">
<el-input
v-model="queryShbox.shboxName"
placeholder="请输入手环箱名称"
clearable
@keyup.enter.native="handleQueryShbox"
/>
</el-form-item>
<el-form-item prop="shboxCode">
<el-input
v-model="queryShbox.shboxCode"
placeholder="请输入手环箱编码"
clearable
@keyup.enter.native="handleQueryShbox"
/>
</el-form-item>
<el-form-item prop="shboxStatus">
<el-select v-model="queryShbox.shboxStatus" placeholder="状态" clearable style="width: 100%;">
<el-option
v-for="dict in dict.type.sys_sh_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryShbox">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQueryTwo">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAddbox"
v-hasPermi="['basic:bracelet:add']"
>新增手环箱</el-button>
</el-col>
<el-col :span="1.5">
<!-- 二维码导出组件按钮在内部传选中数组 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" 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" />
<el-table-column label="存放手环数量" align="center" prop="shboxBindNum" >
<template slot-scope="scope">
<div @click="openShall(scope.row)" style="color: #02a7f0; cursor: pointer">
<div>
<span style="color: green;">{{ scope.row.shboxBindNum }}/</span><span>{{ scope.row.shboxCapacity }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="二维码" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="labelUploadCode(scope.row)"
v-hasPermi="['basic:bracelet:query']"
>查看</el-button>
</template>
</el-table-column>
<el-table-column label="手环箱状态" align="center" prop="shboxStatus" >
<template slot-scope="scope">
<div v-if="scope.row.shboxStatus==0" style="color: green;">{{ stateList[Number(scope.row.shboxStatus)] }}</div>
<div v-if="scope.row.shboxStatus==1" style="color: red;">{{ stateList[Number(scope.row.shboxStatus)] }}</div>
</template>
</el-table-column>
<el-table-column label="领用人" align="center" prop="lyName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdatebox(scope.row)"
v-hasPermi="['basic:bracelet:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDeletebox(scope.row)"
v-hasPermi="['basic:bracelet:del']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryShbox.pageNum"
:limit.sync="queryShbox.pageSize"
@pagination="getboxList"
/>
<!-- 手环箱管理页面绑定手环弹窗 -->
<el-dialog :title="title" :visible.sync="showShall" width="1000px" height="1000px" append-to-body>
<el-form :model="queryShBoxall" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item prop="shCode">
<el-input
v-model="queryShBoxall.shCode"
placeholder="请输入手环编码"
clearable
@keyup.enter.native="handleQueryShBind"
/>
</el-form-item>
<el-form-item prop="shPersonName">
<el-input
v-model="queryShBoxall.shPersonName"
placeholder="请输入使用人"
clearable
@keyup.enter.native="handleQueryShBind"
/>
</el-form-item>
<el-form-item prop="shStatus">
<el-select v-model="queryShBoxall.shStatus" placeholder="状态" clearable style="width: 100%;">
<el-option
v-for="dict in dict.type.sys_sh_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryShBind">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQueryThree">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAddSh()"
v-hasPermi="['basic:bracelet:add']"
>绑定手环</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getboxList"></right-toolbar>
</el-row>
<el-table v-loading="loadingSix" :data="shBindList" width="600px" height = "400px" >
<el-table-column label="手环id" align="center" prop="shId" v-if="false" />
<el-table-column label="手环编码" align="center" prop="shCode" />
<el-table-column label="手环状态" align="center" prop="shStatus" >
<template slot-scope="scope">
<div v-if="scope.row.shStatus==0" style="color: green;">{{ stateList[Number(scope.row.shStatus)] }}</div>
<div v-if="scope.row.shStatus==1" style="color: red;">{{ stateList[Number(scope.row.shStatus)] }}</div>
</template>
</el-table-column>
<el-table-column label="使用人" align="center" prop="shPersonName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
style="color:red"
icon="el-icon-edit"
@click="handleDelShbox(scope.row)"
v-hasPermi="['basic:sideband:edit']"
>解除绑定</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="totalTwo>0"
:total="totalTwo"
:page.sync="queryShBoxall.pageNum"
:limit.sync="queryShBoxall.pageSize"
@pagination="getListBoxall"
/>
</el-dialog>
<!-- 手环绑定选择弹窗 -->
<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" 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" />
<el-table-column label="手环编码" align="center" prop="shCode" />
</el-table>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleBindSh"
v-hasPermi="['basic:bracelet:add']"
>绑定</el-button>
<el-button @click="cancelBindTemp">取 消</el-button>
</div>
<!-- <pagination
v-show="totalTwo>0"
:total="totalTwo"
:page.sync="queryshNoBind.pageNum"
:limit.sync="queryshNoBind.pageSize"
@pagination="getListNoBind"
/> -->
</el-dialog>
<!-- 添加或修改手环箱对话框 -->
<el-dialog :title="title" :visible.sync="openbox" width="600px" append-to-body>
<el-form ref="formTwo" :model="formTwo" :rules="rulesbox" label-width="100px" >
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="手环箱名称" prop="shboxName">
<el-input v-model="formTwo.shboxName" placeholder="请输入手环箱名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手环箱编码" prop="shboxCode">
<el-input v-model="formTwo.shboxCode" placeholder="请输入手环箱编码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="14">
<el-form-item label="手环箱容量" prop="shboxCapacity">
<el-input v-model.number="formTwo.shboxCapacity" placeholder="请输入手环箱容量" >
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormbox"> </el-button>
<el-button @click="cancelbox"> </el-button>
</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>
</template>
<script>
import { listBracelet, listShboxall,delShById, exportSh,listShbox,addSh,listShboxBind,addShBind,delSh,editSh,
getBoxInfo,editBox,addBox,delShboxById,listShBind,listShNoBind,bindSh,getBoxNewInfo,addAttribute} from "@/api/base/bracelet";
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,qrCodeUpload
},
data() {
return {
radioOne:null,
radioTwo:null,
activeName: 'first',
// 遮罩层
loading: true,
// 遮罩层2
loadingTwo:true,
// 遮罩层3
loadingThree:true,
// 遮罩层4
loadingFour:true,
// 遮罩层5
loadingFive:true,
// 遮罩层6
loadingSix:true,
// 遮罩层7
loadingSeven:true,
// 选中数组
ids: [],
idsbox: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//绑定设备总条数
totalTwo:0,
//未绑定设备总条数
totalThree:0,
// 手环表格数据
braceletList: [],
// 手环箱表格数据
shboxList: [],
// 手环箱所有表格数据
shboxallList:[],
//手环绑定选择表格数据
shboxListBind: [],
//未绑定手环表格数据
shListNoBind: [],
// 绑定设备表格数据
bindNoList: [],
//手环箱绑定手环表格数据
shBindList: [],
// 弹出层标题
title: "",
boxName: "未绑定",
bind:"解绑",
// 是否显示弹出层
open: false,
//所属工程
proList: [],
//状态
StatusList:[],
selectOption:false,
zero:0,
shboxbindId:0,
Qrcode:"",
//二维码
rowObj:{},
uploadOpen:false,
shboxCodeTemp:'',
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
shId:undefined,
shCode:undefined,
shboxName: undefined,
shboxCode: undefined,
shPersonName:undefined,
shStatus:undefined,
},
queryshCode:{
pageNum: 1,
pageSize: 10,
shCode: undefined,
shboxName: undefined,
shboxId: undefined,
},
queryshCodeBind:{
pageNum: 1,
pageSize: 10,
shId: undefined,
keyword: undefined,
shboxName: undefined,
shboxId: undefined,
shboxCapacity: undefined,
shboxBindNum: undefined,
},
numers:0,
addNums:0,
numersTemp:0,
Capacity: 0,
BindNum: 0,
boxId:0,
queryshNoBind:{
pageNum: 1,
pageSize: 10,
shId: undefined,
shCode: undefined,
shboxId: undefined,
},
queryshEdit:{
pageNum: 1,
pageSize: 10,
shId: undefined,
shCode: undefined,
shboxName: undefined,
shboxId: undefined,
},
queryShbox: {
pageNum: 1,
pageSize: 10,
shboxId:undefined,
shboxCode:undefined,
shboxName: undefined,
shboxStatus:undefined,
},
queryShBoxall: {
pageNum: 1,
pageSize: 10,
shboxId:undefined,
shCode:undefined,
shId:undefined,
shPersonName: undefined,
shStatus:undefined,
},
showsh:false,
showshBind:false,
showDevice:false,
showShEdit:false,
showShall:false,
openbox:false,
openSh:false,
showAttribute:false,
stateList:['在用','未用'],
accept:'.png, .jpg, .jpeg, .pdf, .doc, .docx',
highImgList: [],
electricianImgList: [],
elseImgList: [],
// 表单参数
form: {},
formTwo: {},
formThree: {},
//图片上传
fileList: [],
//图片查看弹窗
dialogImageUrl: '',
dialogVisible: false,
maxLength:100,//已选列表上限,防止数据过多请求报错
currentSelection:[],//已选列表
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/bracelet/person/excelUpload"
},
// 表单校验
rules: {
shCode: [
{ required: true, message: "手环编码不能为空", trigger: "blur" }
],
},
rulesbox: {
shboxName: [
{ required: true, message: "手环箱名称不能为空", trigger: "blur" }
],
shboxCode: [
{ required: true, message: "手环箱编码不能为空", trigger: "blur" }
],
shboxCapacity: [
{ required: true, message: "手环箱容量不能为空",trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!value) {
return callback(new Error('请必须输入为正整数'));
}
if (!Number.isInteger(value) || value <= 0) {
callback(new Error('请必须输入为正整数'));
} else {
callback();
}
},
trigger: 'blur'
}
],
},
rulesShAttribute: {
dataName: [
{ required: true, message: "设备属性名称不能为空", trigger: "blur" }
],
dataVal: [
{ required: true, message: "设备采集值不能为空", trigger: "blur" }
],
dataUnit: [
{ required: true, message: "设备值单位不能为空", trigger: "blur" }
],
dataCode: [
{ required: true, message: "级联编码不能为空", trigger: "blur" }
],
},
};
},
computed: {
//图片上传1张后隐藏上传框
uploadDisabled() {
return this.fileList.length > 0
},
},
created() {
this.getList();
this.getboxList();
},
methods: {
/** 查询手环列表 */
getList() {
this.loading = true;
listBracelet(this.queryParams).then(response => {
this.braceletList = response.rows;
this.total = response.total;
this.loading = false;
});
},
selectAll() {
this.$refs.MainTable.clearSelection();
},
selectable(row, index) {
if(this.numers==0){
if(this.ids.indexOf(row.shId) != -1){
return true;
}else{
return false;
}
}else{
return true;
}
},
// 取消按钮
cancel() {
this.showsh = false;
this.reset();
},
// 修改手环页面取消按钮
cancelEdit() {
this.showShEdit = false;
// this.resetEdit();
},
// 手环绑定选择页面取消按钮
cancelBind() {
this.showshBind = false;
this.resetBind();
},
// 手环绑定
cancelBindTemp() {
this.openSh = false;
this.resetBindTemp();
},
// 手环箱管理页面取消按钮
cancelbox() {
this.openbox = false;
this.resetbox();
},
// 表单重置
reset() {
this.queryParams = {};
this.resetForm("queryParams");
},
resetbox() {
this.formTwo = {};
this.resetForm("formTwo");
},
resetAttribute() {
this.formThree = {};
this.resetForm("formThree");
},
// 手环修改按钮页面表单重置
resetEdit() {
this.queryshEdit = {};
this.resetForm("queryshEdit");
},
// 手环绑定选择页面表单重置
resetBind() {
this.queryshCodeBind = {};
this.resetForm("queryshCodeBind");
},
resetBindTemp() {
this.queryshNoBind = {};
this.resetForm("queryshNoBind");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 手环绑定选择搜索按钮操作 */
handleQueryBind() {
this.queryshCodeBind.pageNum = 1;
this.getListBind();
},
//手环箱管理页面搜索按钮操作
handleQueryShbox() {
this.queryShbox.pageNum = 1;
this.getboxList();
},
//手环箱管理页面搜索按钮操作
handleQueryShBind() {
this.queryShBoxall.pageNum = 1;
this.queryShBoxall.shboxId = this.queryShBoxall.shboxId;
this.getListBoxall();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 重置按钮操作 */
resetQueryTwo() {
this.resetForm("queryForm");
this.handleQueryShbox();
},
/** 重置按钮操作 */
resetQueryThree() {
this.resetForm("queryForm");
this.handleQueryShBind();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.numers=this.addNums;
this.numers=this.numers-selection.length
this.ids = selection.map(item => item.shId);
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)
const param = {
shId:row.shId,
}
this.$modal.confirm('确定把该手环与手环箱解除绑定吗?解绑后重新绑定才能继续使用!').then(function() {
return delSh(param);
}).then(() => {
this.getList();
// this.getBoxInfo();
this.$modal.msgSuccess("解除绑定成功");
}).catch(() => {});
},
/** 手环箱管理页面解除绑定操作 */
handleDelShbox(row) {
console.log(row)
const param = {
shId:row.shId,
}
this.$modal.confirm('确定把该手环与手环箱解除绑定吗?解绑后重新绑定才能继续使用!').then(function() {
return delSh(param);
}).then(() => {
this.getboxList();
this.getListBoxall();
this.$modal.msgSuccess("解除绑定成功");
this.BindNum = this.BindNum - 1;
this.numers = this.Capacity - this.BindNum;
}).catch(() => {});
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增手环";
},
/** 手环箱管理页面新增按钮操作 */
handleAddbox() {
this.resetbox();
this.openbox = true;
this.title = "新增手环箱";
},
/** 手环箱管理页面绑定手环按钮操作 */
handleAddSh() {
this.openSh = true;
this.title = "绑定手环";
this.getListNoBind();
},
/** 新增设备属性按钮操作 */
handleAddAttribute(row) {
this.resetAttribute();
this.formThree.shId = row.shId;
this.title = "新增设备属性"
this.showAttribute = true;
},
/** 手环管理页面新增设备属性提交按钮 */
submitFormAttribute() {
this.$refs["formThree"].validate(valid => {
if (valid) {
addAttribute(this.formThree).then(response => {
this.$modal.msgSuccess("新增成功");
this.showAttribute = false;
this.getList();
});
}
});
},
// 手环管理页面新增设备属性取消按钮
cancelAttribute() {
this.showAttribute = false;
this.resetAttribute();
},
/** 绑定操作 */
handleBindSh(row) {
const shIds = row.shId || this.ids;
console.log(shIds)
const param = {
shboxId:this.shboxbindId,
shIds:shIds,
}
console.log(param)
this.$modal.confirm('确定与该手环箱绑定吗?').then(function() {
return bindSh(param);
}).then(() => {
this.getBoxInfo();
this.getboxList();
this.getListBoxall();
this.getListNoBind();
this.$modal.msgSuccess("绑定成功");
this.openSh = false;
}).catch(() => {});
},
/** 修改按钮操作 */
handleUpdate(row) {
// this.reset();
const shPersonName = row.shPersonName;
const shId = row.shId;
if(shPersonName!=null){
this.$alert('手环已绑定使用人,不可修改', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
return;
}
this.shboxId = row.shboxId;
this.shId = row.shId;
this.title = "修改手环"
this.showShEdit = true;
this.getListShEdit();
this.queryshEdit.pageNum = 1;
this.queryshEdit.shId = row.shId;
this.queryshEdit.shCode = row.shCode;
},
handleUpdatebox(row) {
this.resetbox();
const lyName = row.lyName;
if(lyName!=null){
this.$alert('手环箱已绑定领用人,不可修改', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
return;
}
const shboxId = row.shboxId
getBoxInfo(shboxId).then(response => {
this.formTwo = response.data;
this.$set(this.formTwo,'shboxName',response.data.shboxName+'')
this.$set(this.formTwo,'shboxCode',response.data.shboxCode+'')
this.$set(this.formTwo,'shboxCapacity',response.data.shboxCapacity)
this.formTwo.shboxId = response.data.shboxId;
setTimeout(()=>{
this.openbox = true;
this.title = "修改手环箱";
},100)
});
},
handleClick(tab, event) {
this.getList();
this.getboxList();
console.log(tab, event);
},
getShboxName(e,row){
this.queryshCode.shboxId = row.shboxId;
this.queryshCode.shboxName = row.shboxName;
if(e.target.value == this[e.target.name]){
e.target.checked = false
this.queryshCode.shboxId = null;
this.queryshCode.shboxName =null;
this[e.target.name] = ''
}
},
getShboxNameEdit(e,row){
this.queryshEdit.shboxId = row.shboxId;
this.queryshEdit.shboxName = row.shboxName;
if(this.shboxId == row.shboxId){
this.shboxId = 0
e.target.checked = false;
this.queryshEdit.shboxId = null;
this.queryshEdit.shboxName =null;
}else{
this.shboxId = row.shboxId;
}
console.log(this.queryshEdit)
},
getShboxBindName(e,row){
this.queryshCodeBind.shboxId = row.shboxId;
this.queryshCodeBind.shboxName = row.shboxName;
this.queryshCodeBind.shboxCapacity = row.shboxCapacity;
this.queryshCodeBind.shboxBindNum = row.shboxBindNum;
// if(e.target.value == this[e.target.name]){
// e.target.checked = false
// this.queryshCodeBind.shboxId = null;
// this.queryshCodeBind.shboxName =null;
// this.queryshCodeBind.shboxCapacity = null;
// this.queryshCodeBind.shboxBindNum = null;
// this[e.target.name] = ''
// }
if(this.shboxId == row.shboxId){
this.shboxId = 0
e.target.checked = false;
this.queryshCodeBind.shboxId = null;
this.queryshCodeBind.shboxName =null;
this.queryshCodeBind.shboxCapacity = null;
this.queryshCodeBind.shboxBindNum = null;
}else{
this.shboxId = row.shboxId;
}
},
/** 提交按钮 */
submitForm() {
this.queryshCode.shCode = this.queryshCode.shCode;
console.log(this.queryshCode);
this.$refs["queryshCode"].validate(valid => {
if (valid) {
addSh(this.queryshCode).then(response => {
this.$modal.msgSuccess("新增成功");
this.showsh = false;
this.getList();
});
}
})
},
/** 手环绑定选择页面提交按钮 */
submitFormBind() {
console.log(this.queryshCodeBind);
if(this.queryshCodeBind.shboxId == undefined){
this.$modal.msgError("请选择手环箱");
return;
}
this.$refs["queryshCodeBind"].validate(valid => {
if (valid) {
addShBind(this.queryshCodeBind).then(response => {
this.$modal.msgSuccess("绑定成功");
this.showshBind = false;
this.getList();
});
}
})
},
/** 修改手环页面提交按钮 */
submitFormEdit() {
console.log(this.queryshEdit);
this.queryshEdit.shCode = this.queryshEdit.shCode;
this.queryshEdit.shboxId = this.shboxId;
this.$refs["queryshEdit"].validate(valid => {
if (valid) {
editSh(this.queryshEdit).then(response => {
this.$modal.msgSuccess("修改成功");
this.showShEdit = false;
this.getList();
});
}
})
},
/** 手环箱管理页面提交按钮 */
submitFormbox() {
this.$refs["formTwo"].validate(valid => {
if (valid) {
if (this.formTwo.shboxId != undefined) {
console.log(this.formTwo)
editBox(this.formTwo).then(response => {
this.$modal.msgSuccess("修改成功");
this.openbox = false;
this.getboxList();
});
} else {
console.log(this.formTwo)
addBox(this.formTwo).then(response => {
this.$modal.msgSuccess("新增成功");
this.openbox = false;
this.getboxList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
console.log(row)
if(row.shboxName!=this.boxName){
this.$alert('请先解绑手环', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
// this.$modal.msgError("请先解绑手环");
return;
}
const param = {
shId:row.shId
}
this.$modal.confirm('是否确认删除手环编号为"' + row.shCode + '"的数据项?').then(function() {
return delShById(param);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 手环箱子管理页面删除按钮操作 */
handleDeletebox(row) {
console.log(row)
console.log(row.shboxBindNum);
if (row.shboxBindNum!=0) {
this.$alert('手环箱不为空,还存放有手环,无法删除', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
// this.$modal.msgError("请先解绑手环");
return;
}
const param = {
shboxId:row.shboxId
}
this.$modal.confirm('是否确认删除手环箱编号为"' + row.shboxCode + '"的数据项?').then(function() {
return delShboxById(param);
}).then(() => {
this.getboxList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
exportSh(this.queryParams).then(res => {
downloadFile({ fileName: `手环_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
})
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "人员导入";
this.upload.open = true;
},
/** 查询手环箱列表 */
getListTemp() {
this.loadingTwo = true;
listShbox(this.queryshCode).then(response => {
this.shboxList = response.rows;
console.log(this.shboxList)
this.totalTwo = response.total;
this.loadingTwo = false;
});
},
/** 查询手环箱里绑定手环列表 */
getListBoxall() {
this.loadingSix = true;
this.queryShBoxall.shboxId = this.shboxId;
listShBind(this.queryShBoxall).then(response => {
this.shBindList = response.rows;
this.totalTwo = response.total;
this.loadingSix = false;
});
},
/** 手环箱管理查询手环箱列表 */
getboxList() {
this.loadingFive = true;
console.log(this.queryShbox);
listShboxall(this.queryShbox).then(response => {
this.shboxallList = response.rows;
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()
}
});
},
/** 查询修改手环列表 */
getListShEdit() {
this.loadingFour = true;
listShbox(this.queryshEdit).then(response => {
this.shboxList = response.rows;
console.log(this.shboxList)
this.totalTwo = response.total;
this.loadingFour = false;
});
},
/** 查询手环绑定选择列表 */
getListBind() {
this.loadingThree = true;
listShboxBind(this.queryshCodeBind).then(response => {
this.shboxListBind = response.rows;
console.log(this.shboxListBind)
this.totalThree = response.total;
this.loadingThree = false;
});
},
/** 查询手环未绑定列表 */
getListNoBind(){
this.loadingSeven = true;
this.queryshNoBind.shboxId = this.queryShBoxall.shboxId;
console.log(this.queryshNoBind)
listShNoBind(this.queryshNoBind).then(response => {
this.shListNoBind = response.rows;
console.log(this.shboxListBind)
this.totalTwo = response.total;
this.loadingSeven = false;
});
},
//打开手环页面
openShbox(row){
// this.sidebandId = row.sidebandId;
this.title = "新增手环"
this.showsh = true;
this.getListTemp();
this.radioOne=null;
this.queryshCode.pageNum = 1;
this.queryshCode.shCode = undefined;
},
//打开手环绑定页面
openShboxTemp(row){
// this.sidebandId = row.sidebandId;
this.title = "选择"
this.showshBind = true;
this.getListBind();
this.radioTwo=null;
this.queryshCodeBind.pageNum = 1;
this.queryshCodeBind.shId = row.shId;
},
//打开编辑页面
openShEdit(row){
this.shId = row.shId;
this.title = "修改手环"
this.showShEdit = true;
this.getListShEdit();
this.queryshEdit.pageNum = 1;
this.queryshEdit.shCode = row.shCode;
},
//打开手环箱里手环信息页面
openShall(row){
this.shboxId = row.shboxId;
console.log(row)
this.title = "绑定的手环信息",
this.boxId = row.shboxId;
this.Capacity = Number(row.shboxCapacity),
this.BindNum = Number(row.shboxBindNum),
// this.numers = Number(row.shboxCapacity)-Number(row.shboxBindNum);
// this.addNums = this.numers;
this.queryShBoxall.shboxId = row.shboxId;
this.showShall = true;
this.getListBoxall();
this.getBoxInfo();
this.shboxbindId = row.shboxId;
},
//打开手环箱里手环信息页面
getBoxInfo(){
console.log("------->"+this.shboxId);
getBoxNewInfo(this.boxId).then(response => {
console.log(response.data.boxNum)
this.numers = response.data.boxNum;
this.addNums = response.data.boxNum;
})
},
//关闭证书上传
cancelGt(){
this.highImgList = []
this.electricianImgList = []
this.elseImgList = []
this.showsh = false;
},
//提交证书上传
submitCertificate(){
console.log(this.highImgList)
console.log(this.electricianImgList)
console.log(this.elseImgList)
// this.highImgList = []
// this.electricianImgList = []
// this.elseImgList = []
this.showsh = false;
},
}
};
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
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.order .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>