设备登记添加接入、修改状态按钮样式
This commit is contained in:
zhujiyan
@@ -1,135 +1,130 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label='设备类型'>
|
||||
<el-form-item label="设备类型">
|
||||
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
|
||||
<el-select
|
||||
v-model='tableStore.table.params.devType'
|
||||
v-model="tableStore.table.params.devType"
|
||||
clearable
|
||||
@change='devTypeChange'
|
||||
placeholder='请选择设备类型'
|
||||
@change="devTypeChange"
|
||||
placeholder="请选择设备类型"
|
||||
>
|
||||
<el-option
|
||||
v-for='item in devTypeOptions'
|
||||
:key='item.value'
|
||||
:label='item.label'
|
||||
:value='item.value'
|
||||
v-for="item in devTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='设备型号'>
|
||||
<el-select v-model='tableStore.table.params.devModel' clearable placeholder='请选择设备型号'>
|
||||
<el-form-item label="设备型号">
|
||||
<el-select v-model="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
|
||||
<el-option
|
||||
v-for='item in devModelOptionsFilter'
|
||||
:key='item.value'
|
||||
:label='item.label'
|
||||
:value='item.value'
|
||||
v-for="item in devModelOptionsFilter"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='通讯协议'>
|
||||
<el-select v-model='tableStore.table.params.devAccessMethod' clearable placeholder='请选择通讯协议'>
|
||||
<el-option label='MQTT' value='mqtt'></el-option>
|
||||
<el-option label='CLD' value='cloud'></el-option>
|
||||
<el-form-item label="通讯协议">
|
||||
<el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
|
||||
<el-option label="MQTT" value="mqtt"></el-option>
|
||||
<el-option label="CLD" value="cloud"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='状态'>
|
||||
<el-select v-model='tableStore.table.params.status' clearable placeholder='请选择状态'>
|
||||
<el-option label='未注册' :value='1'></el-option>
|
||||
<el-option label='注册' :value='2'></el-option>
|
||||
<el-option label='接入' :value='3'></el-option>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
|
||||
<el-option label="未注册" :value="1"></el-option>
|
||||
<el-option label="注册" :value="2"></el-option>
|
||||
<el-option label="接入" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type='primary' @click='downLoadFile' class='ml10' icon='el-icon-Download'>
|
||||
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
|
||||
模版下载
|
||||
</el-button>
|
||||
<el-upload
|
||||
style='display: inline-block'
|
||||
action=''
|
||||
accept='.xlsx'
|
||||
class='upload-demo'
|
||||
:show-file-list='false'
|
||||
:auto-upload='false'
|
||||
:on-change='bulkImport'
|
||||
style="display: inline-block"
|
||||
action=""
|
||||
accept=".xlsx"
|
||||
class="upload-demo"
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
:on-change="bulkImport"
|
||||
>
|
||||
<el-button type='primary' class='ml10' icon='el-icon-Tickets'>批量导入</el-button>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
|
||||
</el-upload>
|
||||
<el-button type='primary' class='ml10' @click='add' icon='el-icon-Plus'>新增设备</el-button>
|
||||
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref='tableRef'></Table>
|
||||
<Table ref="tableRef"></Table>
|
||||
|
||||
<el-dialog
|
||||
:title='dialogTitle'
|
||||
v-model='dialogFormVisible'
|
||||
:close-on-click-modal='false'
|
||||
class='cn-operate-dialog'
|
||||
:before-close='resetForm'
|
||||
:title="dialogTitle"
|
||||
v-model="dialogFormVisible"
|
||||
:close-on-click-modal="false"
|
||||
class="cn-operate-dialog"
|
||||
:before-close="resetForm"
|
||||
>
|
||||
<el-form :model='form' label-width='120px' :rules='rules' ref='ruleFormRef'>
|
||||
<el-form-item label='设备名称:' prop='name'>
|
||||
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
|
||||
<el-form-item label="设备名称:" prop="name">
|
||||
<el-input
|
||||
v-model='form.name'
|
||||
autocomplete='off'
|
||||
v-model="form.name"
|
||||
autocomplete="off"
|
||||
clearable
|
||||
placeholder='请输入（项目名称+设备名称）'
|
||||
placeholder="请输入（项目名称+设备名称）"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label='网络设备ID:' prop='ndid' class='top'>
|
||||
<el-input v-model='form.ndid' autocomplete='off' placeholder='请输入'></el-input>
|
||||
<el-form-item label="网络设备ID:" prop="ndid" class="top">
|
||||
<el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label='设备类型:' prop='devType' class='top'>
|
||||
<el-select
|
||||
v-model='form.devType'
|
||||
placeholder='请选择'
|
||||
@change='formDevTypeChange'
|
||||
clearable
|
||||
>
|
||||
<el-form-item label="设备类型:" prop="devType" class="top">
|
||||
<el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
|
||||
<el-option
|
||||
v-for='item in devTypeOptions'
|
||||
:key='item.value'
|
||||
:label='item.label'
|
||||
:value='item.value'
|
||||
v-for="item in devTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='设备型号:' prop='devModel' class='top'>
|
||||
<el-select v-model='form.devModel' placeholder='请选择' clearable>
|
||||
<el-form-item label="设备型号:" prop="devModel" class="top">
|
||||
<el-select v-model="form.devModel" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for='item in formDevModelOptionsFilter'
|
||||
:key='item.value'
|
||||
:label='item.label'
|
||||
:value='item.value'
|
||||
v-for="item in formDevModelOptionsFilter"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='通讯协议:' prop='devAccessMethod' class='top'>
|
||||
<el-select v-model='form.devAccessMethod' placeholder='请选择' clearable>
|
||||
<el-option label='MQTT' value='MQTT'></el-option>
|
||||
<el-option label='CLD' value='cloud'></el-option>
|
||||
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
|
||||
<el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
|
||||
<el-option label="MQTT" value="MQTT"></el-option>
|
||||
<el-option label="CLD" value="cloud"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label='合同号:' prop='cntractNo' class='top'>
|
||||
<el-input v-model='form.cntractNo' autocomplete='off' placeholder='请输入'></el-input>
|
||||
<el-form-item label="合同号:" prop="cntractNo" class="top">
|
||||
<el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click='resetForm'>取 消</el-button>
|
||||
<el-button type='primary' @click='onSubmit'>确 定</el-button>
|
||||
<el-button @click="resetForm">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<div class='qrcode-label'>
|
||||
<div class='qrcode-label-title'>{{ deivce.mac }}</div>
|
||||
<img class='qrcode-label-img' alt='二维码加载失败' :src='deivce.qrPath' />
|
||||
<div class="qrcode-label">
|
||||
<div class="qrcode-label-title">{{ deivce.mac }}</div>
|
||||
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
@@ -249,8 +244,21 @@ const tableStore = new TableStore({
|
||||
{
|
||||
title: '状态',
|
||||
field: 'status',
|
||||
formatter: row => {
|
||||
return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
|
||||
// formatter: row => {
|
||||
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
|
||||
// },
|
||||
render: 'tag',
|
||||
custom: {
|
||||
1: 'warning',
|
||||
2: 'success',
|
||||
3: 'primary',
|
||||
4: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
1: '未注册',
|
||||
2: '注册',
|
||||
3: '接入',
|
||||
4: '已取消'
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -260,19 +268,19 @@ const tableStore = new TableStore({
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
title: '接入',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
icon: 'el-icon-Grid',
|
||||
render: 'basicButton',
|
||||
|
||||
click: async row => {
|
||||
dialogFormVisible.value = true
|
||||
dialogTitle.value = '编辑设备'
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
form.id = row.id
|
||||
disabled: row => {
|
||||
return (
|
||||
(row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
|
||||
row.devModel != 'a0d4da4b5c17b2172362a3f5a27bf217') ||
|
||||
row.status == '3'
|
||||
)
|
||||
},
|
||||
click: row => {
|
||||
console.log('接入')
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -280,7 +288,12 @@ const tableStore = new TableStore({
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Grid',
|
||||
render: 'basicButton',
|
||||
|
||||
disabled: row => {
|
||||
return (
|
||||
row.devType == '8b45cf6b7f5266e777d07c166ad5fa77' &&
|
||||
row.devModel == 'a0d4da4b5c17b2172362a3f5a27bf217'
|
||||
)
|
||||
},
|
||||
click: row => {
|
||||
deivce.value = row
|
||||
deivce.value.qrPath = fullUrl(deivce.value.qrPath)
|
||||
@@ -299,13 +312,28 @@ const tableStore = new TableStore({
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
|
||||
click: async row => {
|
||||
dialogFormVisible.value = true
|
||||
dialogTitle.value = '编辑设备'
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
form.id = row.id
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'basicButton',
|
||||
|
||||
click: row => {
|
||||
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
@@ -430,10 +458,9 @@ onMounted(() => {
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const addMenu = () => {
|
||||
}
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.qrcode-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user