父传子
父组件
组件 :data=“thingDevice”
<el-tabs v-model="activeName"
@tab-click="handleClick">
<el-tab-pane label="基础信息"
name="item-1">
<basic :data="thingDevice"></basic>
</el-tab-pane>
</el-tebs>
<script>
import BaseMixin from "@/mixins/base";
import request from "@/utils/request";
import SETTING from "@/settings";
import Basic from "../details/basic"
export default {
mixins: [BaseMixin],
components: {
Basic
},
data () {
return {
activeName: sessionStorage.equipmentActivenName || "item-1",
thingDevice: {}, //设备信息
};
},
computed: {
id () {
return this.$route.query.devId
}
},
created () {
if (!this.id) {
this.$router.replace("/equipment/device_index")
return
}
this.getList();
},
methods: {
handleClick (tab) {
sessionStorage.equipmentActivenName = tab.name // 缓存页面状态
},
getList () {
this.loading = true
request({
url: `/manager/DeviceBindInfo/getDeviceDetails/` + this.id,
}).then(
(res) => {
if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
this.thingDevice = res.data.thingDevice
} else {
this.$message({
type: "error",
message: res.msg || res.resultMsg || "查询失败",
});
}
this.loading = false
},(_) => {
this.loading = false
this.$message({
type: "error",
message: _.resultMsg || "查询列表失败",
});
}
);
},
},
};
</script>
子组件
props: {
data: {
type: Object,
default: () => {
return {}
}
}, },
<template>
<div style="max-width:1000px">
<el-descriptions class="list"
title="设备信息"
:column="2">
<el-descriptions-item label="设备名称">{{data.deviceName}}</el-descriptions-item>
<el-descriptions-item label="设备ID">{{data.devId}}</el-descriptions-item>
<el-descriptions-item label="产品名称">{{data.productName}}</el-descriptions-item>
<el-descriptions-item label="产品ID">{{data.productId}}</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script>
import BaseMixin from "@/mixins/base";
export default {
mixins: [BaseMixin],
props: {
data: {
type: Object,
default: () => {
return {}
}
},
},
data () {
return {};
},
methods: {}
}
</script>
子传父
父组件
组件 ref=“device”
赋值 let data = this.$refs.device.selectRowData
<el-drawer title="新增设备"
:visible.sync="showAdd"
:direction="direction"
size="50%">
<template>
<div class="demo-drawer__content">
<dev-add ref="device"></dev-add>
</div>
<div class="demo-drawer__footer">
<el-button @click="showAdd= false">取 消</el-button>
<el-button type="primary"
@click="onSubmit">确 定</el-button>
</div>
</template>
</el-drawer>
<script>
import BaseMixin from "@/mixins/base";
import request from "@/utils/request";
import SETTING from "@/settings";
import deviceAdd from "../group/deviceAdd"
export default {
mixins: [BaseMixin],
components: {
'dev-add': deviceAdd
},
data () {
return {
showAdd: false,
rowId: '',
rowName: '',
};
},
mounted () {
this.getList()
this.getprojectList()
this.handleQuery();
},
methods: {
onSubmit () {
this.showAdd = false
let data = this.$refs.device.selectRowData
let deviceId = []
let i = 0
data.forEach((res) => {
deviceId[i] = res.devId
i++
});
request({
url: `/manager/groupDeviceBind/update`,
method: "post",
data: {
deviceList: deviceId
},
}).then((res) => {
if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
this.$message({
type: "success",
message: res.message || "操作成功",
});
} else {
this.$message({
type: "error",
message: res.message || "操作失败",
});
}
});
},
},
};
</script>
子组件
定义并赋值 this.selectRowData = val
<template>
<div>
<div class="center-container">
<el-table border
ref="multipleTable"
:data="tableData"
:header-cell-class-name="cellClass"
header-row-class-name="iot-table-header"
@selection-change="handleSelectionChange"
height="100%">
<template slot="empty">
<el-empty description="暂无数据"></el-empty>
</template>
<el-table-column align="center"
type="selection"
width="50" />
<el-table-column align="center"
type="index"
label="序号"
width="60"></el-table-column>
<el-table-column prop="devId"
label="设备ID"
min-width="100"></el-table-column>
<!-- 省略更多列-->
</el-table>
</div>
<div class="footer-container">
<pagination v-show="pagination.total > 0"
:limit.sync="pagination.size"
:page.sync="pagination.page"
:total="pagination.total"
@pagination="getList" />
</div>
</div>
</template>
<script>
import BaseMixin from "@/mixins/base";
import request from "@/utils/request";
import SETTING from "@/settings";
export default {
mixins: [BaseMixin],
data () {
return {
selectRowData: [],
};
},
mounted () {
this.handleQuery();
},
methods: {
// 查询列表信息
handleQuery () {
this.pagination.page = 1;
this.getList();
},
getList () {
this.isTableLoading = true;
request({
url: `/manager/DeviceBindInfo/queryAllDevice`,
method: "post",
data: {
pageNum: this.pagination.page,
pageSize: this.pagination.size,
...this.searchForm,
},
}).then(
(res) => {
if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
this.tableData = res.data.list;
this.pagination.total = res.data.total;
}
this.isTableLoading = false;
},
(_) => {
this.isTableLoading = false;
this.$message({
type: "error",
message: _.resultMsg || "查询列表失败",
});
}
);
},
cellClass (row) {
if (row.columnIndex === 0) {
return 'disabledCheck'
}
},
handleSelectionChange (val) {
this.selectRowData = val
},
},
};
在实际的项目开发中暂时就学了这两种,以后学到了更多的再更新吧,陌生的朋友们,我们一起加油呀!