<template>
<app-container>
<el-row>
<!--左半部分-->
<el-col :span="5">
<div class="dept-div">
<el-card class="box-card" shadow="always">
<el-scrollbar ref="deptScroll" class="user-dept-scroll">
<el-input
v-model="filterText"
clearable
placeholder="请输入项目名称"
/>
<el-tree
ref="tree"
v-loading="treeLoading"
:filter-node-method="filterNode"
:data="deptTree"
:props="defaultProps"
:default-expand-all="expandAllNode"
:expand-on-click-node="expandNodeClick"
@node-click="handleNodeClick"
/>
</el-scrollbar>
</el-card>
</div>
</el-col>
<!--右半部分-->
<el-col :span="19">
<el-form
ref="dataForm"
:rules="rules"
:model="listQuery"
label-well-code="right"
label-width="100px"
>
<div class="titleHeadStyle">
<div>{{ headerValue }}</div>
</div>
<div class="titleStyle">
基础配置
</div>
<el-row :gutter="10">
<el-col :span="20">
<el-col :span="10">
<el-form-item label="经度" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入经度"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="纬度" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入纬度"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="20">
<el-col :span="10">
<el-form-item label="生产工单" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请选择是否生产工单"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="APP推送" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请选择是否是否APP推送"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="20">
<el-col :span="10">
<el-form-item label="通讯协议" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入通讯协议"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="默认坐标系" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入默认坐标系"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
<div class="titleStyle">
NB平台配置
</div>
<el-row :gutter="10">
<el-col :span="20">
<el-col :span="10">
<el-form-item label="APPID" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入APPID"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="APPKEY" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入APPKEY"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="20">
<el-col :span="10">
<el-form-item label="平台地址" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入平台地址"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="应用名称" prop="devcode">
<el-input
v-model.trim="listQuery.devcode"
clearable
size="small"
type="text"
placeholder="请输入应用名称"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
</el-form>
<div class="buttonGroup">
<el-button size="small" @click="saveData">
保存
</el-button>
<el-button size="small" @click="cencel">
取消
</el-button>
</div>
</el-col>
</el-row>
</app-container>
</template>
<script>
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
// import { alarmTenantList, delAlarmTenant } from '@/api/systemConfig/tenantConfig'
export default {
name: 'TenantConfig',
data() {
return {
headerValue: null,
list: [],
treeLoading: false,
deptTree: null,
defaultProps: {
children: 'children',
label: 'name'
},
filterText: '',
expandAllNode: true,
expandNodeClick: false,
listQuery: {
devcode: ''
},
// 表单校验规则
rules: {
devcode: [{ required: true, message: '设备编号必填', trigger: ['blur', 'change'] }]
}
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
}
},
mounted() {
this.fetchDeptTree()
this.fetchData()
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
search() {},
// 获取组织结构树
fetchDeptTree() {
this.treeLoading = true
getDeptTreeList(this.listQuery).then(response => {
this.deptTree = toTreeList(response.data, '0', true)
this.treeLoading = false
})
},
// 点击左侧组织结构项触发
handleNodeClick(val) {
console.log(val)
this.headerValue = val.name
this.listQuery.deptId = val.id
},
// 获取用户数据
fetchData() {
},
// 保存
saveData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// updateDeviceModel(this.deviceForm).then(response => {
// if (response.code === 200) {
// this.$message.success('修改成功')
// this.$emit('watchChild')
// this.dialogFormVisible = false
// }
// })
}
})
},
// 取消
cencel() {
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.titleHeadStyle{
font-weight: 600;
margin: 20px 0;
}
.titleStyle{
margin: 20px;
font-weight: 600;
}
.buttonGroup{
margin: 20px;
}
.dept-div{
padding-right: 12px;
.box-card{
width:100%;
.user-dept-scroll{
width:100%;
height: calc(100vh - 200px);
}
.el-input{
margin-bottom: 20px;
}
}
}
$tableTitleHeight:46px;
.table{
margin-bottom: 20px;
}
.pagination-container{
margin-bottom: 50px;
}
.table-title{
background-color:rgba(243, 243, 243, 1);
height: $tableTitleHeight;
.title-header{
line-height:$tableTitleHeight;
color: #606266;
font-size: 15px;
i{
margin-left: 5px;
margin-right: 5px;
}
}
}
.edit_btns{
.edit_btn{
float:right;
margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
}
}
</style>
<style>
.dept-div .el-scrollbar__wrap{
overflow-x: auto;
background-color: #fff;
padding: 0px;
}
</style>
