机构元器件层级检索系统 - 在线搜索平台
<template>
<div>
<el-main>
<h2 style="color: rgb(0, 106, 255);">机构检索:</h2>
<el-input v-model="input" style="width:40%" placeholder="请输入机构名称"></el-input>
<el-button type="primary" @click="search1(input)">搜索</el-button>
<pre><code> <h2 style="color: rgb(0, 106, 255);">元器件及其数量检索:</h2>
<el-select v-model="value" placeholder="请选择元器件1">
<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
<el-input-number v-model="num1" label="元器件数量" ></el-input-number>
<el-select v-model="value2" placeholder="请选择元器件2">
<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
<el-input-number v-model="num2" label="元器件数量" ></el-input-number>
<el-select v-model="value3" placeholder="请选择元器件3">
<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
<el-input-number v-model="num3" label="元器件数量" ></el-input-number>
<!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
<el-button type="primary" size="big" @click="search2(item)">搜索</el-button>
<el-button type="primary" size="big" @click.native.prevent="deleteRow(scope.$index)">重置</el-button>
<h2 style="color: rgb(0, 106, 255);">层级检索:</h2>
<div class="block">
<span class="demonstration">请选择依次选择类别、属性、特性:</span>
<el-cascader :options="options" :props="props" clearable></el-cascader>
<el-button type="primary" @click="search3(item)">搜索</el-button>
</div>
</el-main>
</code></pre>
</div>
</template>
<script>
export default {
data(){
return{
input:'',
option:[{
value:'选项1',
label:'伺服电机'
},
{value:'选项2',
label:'变频器'
},
{value:'选项3',
label:'电磁阀'
},
{value:'选项4',
label:'反射传感器'
},
{value:'选项5',
label:'对射传感器'
},
{value:'选项6',
label:'接近开关'
},
{value:'选项7',
label:'微动开关'
},
{value:'选项8',
label:'扫码器'}
],
value:'',
value2:'',
value3:'',
num1:'',
num2:'',
num3:'',
props: { multiple: true },
options: [{ value: 1, label: '搬运',
children: [{ value: 2, label: '线性式',
children: [ { value: 3, label: '单轴' }, { value: 4, label: '多轴搬运' }, { value: 5, label: '气缸机构' } ] }]},
{ value: 6, label: '检测段工艺',
children: [{ value: 7, label: '参数品质',
children: [ { value: 8, label: '胶钉检测' }, { value: 9, label: '盖帽检测' }, { value: 10, label: '焊后检测' },{ value: 11, label: '盖帽检测' },{ value: 12, label: '测厚' },{ value: 13, label: '扫码称重' },{ value: 14, label: '扫码' },{ value: 15, label: '氦检' } ]},
{ value: 16, label: '电池工艺',
children: [ { value:17, label: '激光焊接' }, { value: 18, label: '电池抽负压' } ] },
{ value: 19, label: '外观质量',
children: [ { value: 20, label: '大面检测' }, { value: 21, label: '盖板检测' } ]}]},
{ value: 22, label: '物流输送',
children: [{ value: 23, label: '单向输送',
children: [ { value: 24, label: '定位' }, { value: 25, label: '无阻挡' }, { value: 26, label: '阻挡' } ] },
{ value: 27, label: '换向转运',
children: [ { value: 28, label: '单出口顶升横移' }, { value: 29, label: '多出口顶升横移' } ] },
{ value: 30, label: '提升机',
children: [ { value: 31, label: '定向' }, { value: 32, label: '阻挡' } ] }] }
] };
},
//methods里放方法，方法名字自己取，HTML里绑定的叫啥这里就叫啥
methods:{
search1(y){ //上面传的参数是item，在这里自己取名为y
//指定跳转地址
this.$router.push({
name: 'Table', //跳转页面的路由名字
params: y, //传递给下一个页面的参数
});
},
search2(y){ //上面传的参数是item，在这里自己取名为y
//指定跳转地址
this.$router.push({
name: 'Table', //跳转页面的路由名字
params: y, //传递给下一个页面的参数
});
},
search3(y){ //上面传的参数是item，在这里自己取名为y
//指定跳转地址
this.$router.push({
name: 'Table', //跳转页面的路由名字
params: y, //传递给下一个页面的参数
});
}
}
}
</script>
<template>
<div class="table-container">
<div class="title">搜索结果显示</div>
<div class="list-box">
<table
class="el-table el-table--border ">
<tbody>
<tr v-for="(item, index) in tableData" :key="index"> <!-- 第一行 行 --><!-- v-for是Vue的循环语句，遍历数组 -->
<td> <!-- 第一行 内容 -->
<div >
<span class="num">{{index+1}}. </span>
<span class="name" @click="nameClick(item)">机构名字：{{item.institution}}</span> <!-- index+1让序号从1开始 -->
<!-- @click是点击事件，nameClick()是自己定义的方法(函数)，当点击按钮，则JS执行这个函数。相当于给机构名字绑定了一个名叫nameClick的点击事件 -->
</div>
<ul class="info"> <!-- 第二行 无序列表 -->
<li> <!--列表第一个元素 -->
<span class="strong">一级分类：</span>{{item.primaryClassification}}
</li>
<li> <!--列表第2个元素 -->
<!-- <span class="shuxing">属性：</span>
<span class="strong">{{item.leibie}}</span> -->
<span class="strong">二级分类：</span>{{item.secondaryClassification}}
</li>
<pre><code> </ul>
<p class="info-text">{{item.xinxi}}</p > <!-- 第三行 一段文字 -->
</td>
</tr>
</tbody> <!-- 对表格中的主体内容分组 -->
</table>
</div>
</code></pre>
</div>
</template>
<script>
//引入请求的方法
import request from '@/utils/request';
export default {
data() {
return {
search1:'',
tableData:[ ],
}
},
//methods里放方法，方法名字自己取，HTML里绑定的叫啥这里就叫啥(nameClick就是自己定义的点击方法)
methods:{
nameClick(x){ //上面传的参数是item，在这里自己取名为x
//指定跳转地址
this.$router.push({
name: 'Info', //跳转页面的路由名字
params: x, //传递给下一个页面的参数
});
},
//定义请求方法（获取列表），执行这个函数，获取查询结果(从后端取数据)
getList(params){ //此处的参数就是要传递给后端的形参，后端需要知道要什么才能返回相应的值
return request({
url: '/material/search/common', //接口地址
method: 'get',
params //传递的参数，也就是搜索页面传过来的
})
}
},
//参数传过来之后需要接受参数才能使用，mounted表示页面加载完后执行，
mounted(){
this.search1=this.$route.params; //a把传递过来的y赋给变量search1,这个变量需要在data里定义
},
}
</script>
原文地址: https://www.cveoy.top/t/topic/pla5 著作权归作者所有。请勿转载和采集!