<template> <div class="app-container"> <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px"> <el-form-item label="机器型号"> <el-select v-model="queryParams.model_id" placeholder="请选择机器型号" clearable @keyup.enter.native="handleQuery"> <el-option v-for="item in modelList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="机器编码" > <el-input placeholder="请输入机器编码" v-model="queryParams.code" clearable @keyup.enter.native="handleQuery"></el-input> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['coupon:category:query']">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> --> <el-table v-loading="loading" :data="modelList"> <el-table-column label="机器型号" align="center" prop="model_name"/> <el-table-column label="创建时间" align="center" prop="created_at" /> <el-table-column label="组件管理" align="center"> <template slot-scope="scope"> <a @click="handleComponentDialog(scope.row)" style="color: blue">管理组件</a> </template> </el-table-column> <el-table-column label="机器数量" align="center" prop=""/> <el-table-column label="备注说明" align="center" prop=""/> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> <!-- 组件对话框 --> <ModelCom ref="modelCom" ></ModelCom> </div> </template> <script> import {getModelList} from "@/api/model/model"; import ModelCom from './modelCom.vue'; export default { components: {ModelCom }, data() { return { // 遮罩层 loading: true, // 总条数 total: 0, // 表格数据 modelList: [], // 查询参数 queryParams: { page: 1, limit: 10, }, modelList:[] }; }, created() { this.getList(); }, methods: { /** 查询列表 */ getList() { this.loading = true; getModelList(this.queryParams).then((response) => { if(response.code==0){ this.modelList = response.data; this.total = response.data.length; this.loading = false; } }); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.page = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.getList(); }, //组件 handleComponentDialog(row){ this.$refs.modelCom.handleModelComDialog(row.id); }, } }; </script>