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

1943 lines
70 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" ref="multipleTableSh" row-key="shId" @selection-change="handleSelectionChangeSh" @select="handlerSelectSh" @select-all="handlerSelectAllSh">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="手环id" align="center" prop="shId" v-if="false" />
<el-table-column label="手环编码" align="center" prop="shCode" sortable/>
<el-table-column label="所属手环箱" align="center" prop="shboxName" sortable>
<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" sortable>
<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" sortable/>
<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"
icon="el-icon-circle-plus-outline"
@click="openDeviceAttribute(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" :checked="shboxIdOne==scope.row.shboxId" @click="getShboxName($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" :checked="shboxIdTwo==scope.row.shboxId" @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="showDeviceAttribute" width="1200px" height="1000px" append-to-body>
<el-form :model="queryDeviceAttribute" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item prop="dataCode">
<el-input
v-model="queryDeviceAttribute.dataCode"
placeholder="请输入级联编码"
clearable
@keyup.enter.native="handleQueryDeviceAttribute"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryDeviceAttribute">查询</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="handleAddAttribute"
v-hasPermi="['basic:person:add']"
>新增设备属性</el-button>
</el-col>
</el-row>
<el-table v-loading="loadingTwo" :data="deviceAttributeList " width="600px" height = "600px" >
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryDeviceAttribute.pageNum - 1) * queryDeviceAttribute.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="设备id" align="center" prop="devId" v-if="false" />
<el-table-column label="设备属性名称" align="center" prop="dataName" sortable/>
<el-table-column label="设备采集值" align="center" prop="dataVal" sortable/>
<el-table-column label="设备值单位" align="center" prop="dataUnit" sortable/>
<el-table-column label="级联编码" align="center" prop="dataCode" sortable/>
<el-table-column label="数据类型" align="center" prop="dataType" sortable/>
<el-table-column label="数据采集时间" align="center" prop="dataTime" width="160px" sortable/>
<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="openImg(scope.row.base64Url)"
v-hasPermi="['basic:constructionRecord:edit']"
>查看</el-button>
</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="handleUpdateAttribute(scope.row)"
v-hasPermi="['basic:device:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDeleteDeviceAttribute(scope.row)"
v-hasPermi="['basic:device:del']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="totalTwo>0"
:total="totalTwo"
:page.sync="queryDeviceAttribute.pageNum"
:limit.sync="queryDeviceAttribute.pageSize"
@pagination="getListDeviceAttribute"
/>
</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="请输入设备属性名称" maxlength="20"/>
</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="请输入设备采集值" maxlength="20"/>
</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="请输入设备值单位" maxlength="20">
</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="请输入级联编码" maxlength="20">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="20">
<el-form-item label="数据类型" prop="dataType">
<el-input v-model.number="formThree.dataType" placeholder="请输入数据类型" maxlength="20">
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="24">
<el-col :span="20">
<el-form-item label="数据采集时间" prop="dataTime">
<el-date-picker
placeholder="请选择数据采集日期"
v-model="formThree.dataTime"
style="width: 345px"
value-format="yyyy-MM-dd"
type="date">
</el-date-picker>
</el-form-item>
</el-col>
</el-row> -->
<el-row :gutter="24">
<el-col :span="20">
<el-form-item label="图标 " label-width="120px">
<el-upload
action="#"
:limit="1"
:file-list="fileList"
:show-file-list="true"
:auto-upload="false"
list-type="picture-card"
accept=".png, .jpg, .jpeg"
:on-change="handleChange"
:class="{ disabled: uploadDisabled }"
:on-preview="picturePreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</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-dialog :visible.sync="dialogVisible">
<img width="100%" height="650px" :src="dialogImageUrl" alt />
</el-dialog>
<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="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryShbox.pageNum - 1) * queryShbox.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="手环箱id" align="center" prop="shboxId" v-if="false" />
<el-table-column label="手环箱名称" align="center" prop="shboxName" sortable/>
<el-table-column label="手环箱编码" align="center" prop="shboxCode" sortable/>
<el-table-column label="存放手环数量" align="center" prop="shboxBindNum" sortable>
<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" sortable>
<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" sortable/>
<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="totalTwo>0"
:total="totalTwo"
: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,delDeviceAttribute,exportShSome,
getBoxInfo,editBox,addBox,delShboxById,listShBind,listShNoBind,bindSh,getBoxNewInfo,addAttribute,listDeviceAttribute,getAttributeInfo,editAttribute} 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 {
showDeviceAttribute:false,
delFileId: undefined,
deviceAttributeList : [],
shboxIdOne:null,
shboxIdTwo:null,
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: [],
idsSh: [],
idsbox: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 非单个禁用
singleSh: true,
// 非多个禁用
multipleSh: true,
// 显示搜索条件
showSearch: true,
maxLength:100,//已选列表上限,防止数据过多请求报错
currentSelection:[],//已选列表
currentSelectionSh:[],//手环已选列表
// 总条数
total: 0,
//绑定设备总条数
totalTwo:0,
//未绑定设备总条数
totalThree:0,
// 手环表格数据
braceletList: [],
// 手环箱表格数据
shboxList: [],
// 手环箱所有表格数据
shboxallList:[],
//手环绑定选择表格数据
shboxListBind: [],
//未绑定手环表格数据
shListNoBind: [],
// 绑定设备表格数据
bindNoList: [],
//手环箱绑定手环表格数据
shBindList: [],
// 弹出层标题
title: "",
boxName: "未绑定",
bind:"解绑",
// 是否显示弹出层
open: false,
//所属工程
proList: [],
//图片上传
fileList: [],
//图片查看弹窗
dialogImageUrl: '',
dialogVisible: false,
//状态
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,
},
queryDeviceAttribute: {
pageNum: 1,
pageSize: 10,
shId:undefined,
dataCode: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" }
],
dataType: [
{ required: true, message: "数据类型不能为空", trigger: "blur" },
],
// dataTime: [
// { required: true, message: "数据采集日期不能为空", trigger: "blur" }
// ],
},
};
},
computed: {
//图片上传1张后隐藏上传框
uploadDisabled() {
return this.fileList.length > 0
},
},
created() {
this.getList();
this.getboxList();
},
methods: {
//单选操作-跨页
handlerSelectSh(val, row) {
this.currentSelectionSh.indexOf(row.shId) === -1
? this.currentSelectionSh.push(row.shId)
: this.currentSelectionSh.splice(this.currentSelectionSh.indexOf(row.shId), 1)
},
//全选操作-跨页
handlerSelectAllSh(val) {
if (val.length) {
// 进来此处说明:
// 1 当前页的全选 2 其他页有数据然后当前页的取消全选
// 比较全选或者取消全选与当前页的数据,得到差集
// 如果braceletList中的数据在val中不存在则说明是取消全选需要从currentSelectionSh中移除
// 如果braceletList中所有的数据都在val中存在则说明是全选需要将差集添加到currentSelectionSh中
const isAllSelectSh = this.braceletList.every(item =>
val.some(valItem => valItem.shId === item.shId)
)
if (isAllSelectSh) {
// 全选中新增的差集
const diff = val.filter(
item => !this.currentSelectionSh.some(shId => shId === item.shId)
)
if (this.currentSelectionSh.length + diff.length > this.maxLength) {
this.currentSelectionSh = this.currentSelectionSh.concat(
diff.splice(0, this.maxLength - this.currentSelectionSh.length)
.map(item => item.shId))
diff.forEach(item => this.$refs.multipleTableSh.toggleRowSelection(item, false))
} else {
this.currentSelectionSh = this.currentSelectionSh.concat(diff.map(item => item.shId))
}
} else {
this.currentSelectionSh = this.currentSelectionSh.filter(
shId => !this.braceletList.some(item => item.shId === shId)
)
}
} else {
// 进来此处说明:
// 其他页并无勾选数据,且当前页取消勾选
this.currentSelectionSh = []
}
},
// 手环多选框选中数据
handleSelectionChangeSh(selection) {
this.idsSh = selection.map(item => item.shId)
this.singleSh = selection.length!=1
this.multipleSh = !selection.length
},
//列表-图片查看
openImg(url) {
this.dialogImageUrl = url
this.dialogVisible = true
},
//上传组件-图片查看
picturePreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 图片上传
handleChange(file, fileList) {
this.formThree.fileName = file.name;
this.fileList = fileList;
},
handleRemove(file, fileList) {
let sum = 0
this.fileList.forEach((item, index) => {
if(!item?.hasOwnProperty('raw')) {
this.delFileId = this.formThree.filePath;
}
sum = index;
})
// this.delFileId = this.fileList[sum].fileId;
console.log(this.delFileId)
this.fileList.splice(sum, 1)
},
//提交时循环fileList 获取raw文件
getFileData() {
const file = []
this.fileList.forEach(item => {
if (item?.hasOwnProperty('raw')) {
file.push(item.raw)
}
})
return { file }
},
/** 查询手环列表 */
getList() {
this.loading = true;
listBracelet(this.queryParams).then(response => {
this.braceletList = response.rows;
this.total = response.total;
this.loading = false;
if (this.currentSelectionSh.length) {
this.$nextTick(() => {
this.currentSelectionSh.forEach(row => {
this.braceletList.forEach(item => {
if (item.shId === row) {
this.$refs.multipleTableSh?.toggleRowSelection(item, true)
}
})
})
})
} else {
this.$refs.multipleTableSh?.clearSelection()
}
});
},
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;
},
// 手环绑定选择页面取消按钮
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.currentSelectionSh = [];//重置清除已选列表
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.$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) {
const param = {
shId:row.shId,
}
this.$modal.confirm('确定把该手环与手环箱解除绑定吗?解绑后重新绑定才能继续使用!').then(function() {
return delSh(param);
}).then(() => {
this.getList();
this.$modal.msgSuccess("解除绑定成功");
}).catch(() => {});
},
/** 手环箱管理页面解除绑定操作 */
handleDelShbox(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() {
this.fileList = [];
this.resetAttribute();
this.formThree.shId = this.shId;
this.title = "新增设备属性"
this.showAttribute = true;
},
/** 修改按钮操作 */
handleUpdateAttribute(row) {
this.resetAttribute();
const id = row.id
this.fileList=[];
getAttributeInfo({id:id}).then(response => {
this.formThree = response.data;
// this.$set(this.form,'sex',response.data.sex+'')
if(response.data.fileId && response.data.base64Url){
this.fileList.push({
name: response.data.fileId,
url: response.data.base64Url,
})
}
console.log(this.fileList)
//触发校验
// this.formThree.fileName = response.data.fileId;
setTimeout(()=>{
this.showAttribute = true;
this.title = "修改设备属性";
},100)
});
},
/** 删除按钮操作 */
handleDeleteDeviceAttribute(row) {
const id = row.id;
console.log(id)
this.$modal.confirm('是否确认删除级联编码为"' + row.dataCode + '"的数据项?').then(function() {
return delDeviceAttribute({id:id});
}).then(() => {
this.getListDeviceAttribute();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 手环管理页面新增设备属性提交按钮 */
submitFormAttribute() {
this.$refs["formThree"].validate(valid => {
if (valid) {
if (this.formThree.id != undefined) {
//base64地址别传后台过长
this.formThree.base64Url = '';
this.formThree.delFileId = this.delFileId;
const reqData = new FormData()
reqData.append('params', JSON.stringify(this.formThree))
const { file } = this.getFileData()
file.forEach(item => {
reqData.append('file', item)
})
editAttribute(reqData).then(response => {
this.$modal.msgSuccess("修改成功");
this.showAttribute = false;
this.fileList=[];
// this.getList();
this.getListDeviceAttribute();
});
}else{
const reqData = new FormData()
reqData.append('params', JSON.stringify(this.formThree))
const { file } = this.getFileData()
file.forEach(item => {
reqData.append('file', item)
})
addAttribute(reqData).then(response => {
this.$modal.msgSuccess("新增成功");
this.showAttribute = false;
this.fileList=[];
// this.getList();
this.getListDeviceAttribute();
});
}
}
});
},
// 手环管理页面新增设备属性取消按钮
cancelAttribute() {
this.showAttribute = false;
this.fileList=[];
this.resetAttribute();
},
openDeviceAttribute(row){
this.shId = row.shId;
this.title = "查看设备属性"
this.showDeviceAttribute = true;
this.getListDeviceAttribute();
},
//查看设备属性
handleQueryDeviceAttribute() {
this.queryDeviceAttribute.pageNum = 1;
this.queryDeviceAttribute.shId = this.shId;
// this.title = "查看设备属性"
// this.showDeviceAttribute = true;
this.getListDeviceAttribute();
},
/** 查询设备属性列表 */
getListDeviceAttribute() {
this.loadingTwo = true;
this.queryDeviceAttribute.shId = this.shId;
listDeviceAttribute(this.queryDeviceAttribute).then(response => {
this.deviceAttributeList = response.rows;
this.totalTwo = response.total;
this.loadingTwo = false;
});
},
/** 绑定操作 */
handleBindSh(row) {
const shIds = row.shId || this.ids;
const param = {
shboxId:this.shboxbindId,
shIds:shIds,
}
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&&shPersonName!=''){
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(this.shboxIdOne == row.shboxId){
this.shboxIdOne = null
e.target.checked = false;
this.queryshCode.shboxId = null;
this.queryshCode.shboxName =null;
}else{
this.shboxIdOne = row.shboxId;
}
},
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;
}
},
getShboxBindName(e,row){
this.queryshCodeBind.shboxId = row.shboxId;
this.queryshCodeBind.shboxName = row.shboxName;
this.queryshCodeBind.shboxCapacity = row.shboxCapacity;
this.queryshCodeBind.shboxBindNum = row.shboxBindNum;
if(this.shboxIdTwo == row.shboxId){
this.shboxIdTwo = null
e.target.checked = false;
this.queryshCodeBind.shboxId = null;
this.queryshCodeBind.shboxName =null;
this.queryshCodeBind.shboxCapacity = null;
this.queryshCodeBind.shboxBindNum = null;
}else{
this.shboxIdTwo = row.shboxId;
}
},
/** 提交按钮 */
submitForm() {
this.queryshCode.shCode = this.queryshCode.shCode;
this.$refs["queryshCode"].validate(valid => {
if (valid) {
addSh(this.queryshCode).then(response => {
this.$modal.msgSuccess("新增成功");
this.showsh = false;
this.getList();
});
}
})
},
/** 手环绑定选择页面提交按钮 */
submitFormBind() {
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() {
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) {
editBox(this.formTwo).then(response => {
this.$modal.msgSuccess("修改成功");
this.openbox = false;
this.getboxList();
});
} else {
addBox(this.formTwo).then(response => {
this.$modal.msgSuccess("新增成功");
this.openbox = false;
this.getboxList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
if(row.shboxName!=this.boxName){
this.$alert('请先解绑手环', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
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) {
if (row.shboxBindNum!=0) {
this.$alert('手环箱不为空,还存放有手环,无法删除', '提示', {
type: 'warning',
confirmButtonText: '确定',
});
return;
}
const param = {
shboxId:row.shboxId
}
this.$modal.confirm('是否确认删除手环箱编号为"' + row.shboxCode + '"的数据项?').then(function() {
return delShboxById(param);
}).then(() => {
this.getboxList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
if(this.ids.length == 0){
exportSh(this.queryParams).then(res => {
downloadFile({ fileName: `手环_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
})
}else{
const ids = this.ids.join(',')
exportShSome({ids:ids}).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;
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;
listShboxall(this.queryShbox).then(response => {
this.shboxallList = response.rows;
this.totalTwo = 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;
this.totalTwo = response.total;
this.loadingFour = false;
});
},
/** 查询手环绑定选择列表 */
getListBind() {
this.loadingThree = true;
listShboxBind(this.queryshCodeBind).then(response => {
this.shboxListBind = response.rows;
this.totalThree = response.total;
this.loadingThree = false;
});
},
/** 查询手环未绑定列表 */
getListNoBind(){
this.loadingSeven = true;
this.queryshNoBind.shboxId = this.queryShBoxall.shboxId;
listShNoBind(this.queryshNoBind).then(response => {
this.shListNoBind = response.rows;
this.totalTwo = response.total;
this.loadingSeven = false;
});
},
//打开手环页面
openShbox(row){
this.shboxIdOne = null;
this.title = "新增手环"
this.showsh = true;
this.getListTemp();
this.queryshCode.pageNum = 1;
this.queryshCode.shCode = undefined;
},
//打开手环绑定页面
openShboxTemp(row){
this.queryshCodeBind = {};
this.shboxIdTwo = null;
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;
this.title = "绑定的手环信息",
this.boxId = row.shboxId;
this.Capacity = Number(row.shboxCapacity),
this.BindNum = Number(row.shboxBindNum),
this.queryShBoxall.shboxId = row.shboxId;
this.showShall = true;
this.getListBoxall();
this.getBoxInfo();
this.shboxbindId = row.shboxId;
},
//打开手环箱里手环信息页面
getBoxInfo(){
getBoxNewInfo(this.boxId).then(response => {
console.log(response.data.boxNum)
this.numers = response.data.boxNum;
this.addNums = response.data.boxNum;
})
},
}
};
</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>