<template> <div class="app-container"> <el-table v-loading="loading" :data="componentList"> <el-table-column label="组件类型" align="center" prop="type_desc"/> <el-table-column label="组件名称" align="center" prop="component_name" /> <el-table-column label="适用机型" align="center" prop="apply_model" /> <el-table-column label="组件编码" align="center" prop="co_serial_no" /> <el-table-column label="绑定机器数" align="center" prop="bind_count"> <template slot-scope="scope"> <a @click="handleComBindDialog(scope.row)" style="color: blue">{{scope.row.bind_count}}</a> </template> </el-table-column> <el-table-column label="型号/规格" align="center" prop="rule" /> <el-table-column label="备注说明" align="center" prop="desc"/> <el-table-column label="组件状态" align="center" prop="state_desc"/> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> <el-dialog title="绑定机器信息" :visible.sync="bindDiaLog" width="900px" append-to-body> <el-table v-loading="bindLoading" :data="bindList"> <el-table-column label="机器编码" align="center" prop="code"></el-table-column> <el-table-column label="机器型号" align="center" prop="model_name"></el-table-column> <el-table-column label="状态" align="center" prop="state_desc"></el-table-column> <el-table-column label="绑定时间" align="center" prop="bind_time"></el-table-column> </el-table> <pagination v-show="bindTotal > 0" :total="bindTotal" :page.sync="bindQueryParams.page" :limit.sync="bindQueryParams.limit" @pagination="getComBindMachineList" /> <div slot="footer" class="dialog-footer" > <el-button @click="bindDiaLogCancel">退出</el-button> </div> </el-dialog> </div> </template> <script> import {getComponentBindList,getComBindMachineList} from "@/api/component/component"; export default { data() { return { // 遮罩层 loading: true, // 总条数 total: 0, // 表格数据 componentList: [], // 查询参数 queryParams: { page: 1, limit: 10, }, bindDiaLog:false, bindLoading:true, bindTotal: 0, // 表格数据 bindList: [], // 查询参数 bindQueryParams: { page: 1, limit: 10, name:"" }, }; }, created() { this.getList(); }, methods: { /** 查询列表 */ getList() { this.loading = true; getComponentBindList(this.queryParams).then((response) => { if(response.code==0){ this.componentList = response.data; this.total = response.data.length; this.loading = false; } }); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.page = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.getList(); }, //弹出绑定机器页 handleComBindDialog(row){ this.bindDiaLog=true; this.getComBindMachineList(row.component_name); }, /** 绑定机器信息页 */ getComBindMachineList(name) { this.bindLoading = true; this.bindQueryParams.name=name; getComBindMachineList(this.bindQueryParams).then((response) => { if(response.code==0){ this.bindList = response.data; this.bindTotal = response.data.length; this.bindLoading = false; } }); }, bindDiaLogCancel(){ this.bindDiaLog=false; } } }; </script>