一、vue页面书写:
<template>
<div>
<!-- 终端表格-->
<tp-table ref="itemTab" :all_params="item_params" @add-btn="addItem" @del-btn="delItem"></tp-table>
<!-- 增加/编辑终端model-->
<Modal v-model="itemModelShow" width="580px"
:title="title"
@on-ok="submitItem"
@on-cancel="cancelItem">
<slot name="content">
<Form ref="itemItem" :model="itemItem" :rules="item_ruleValidate" label-position="left" :label-width="100">
<FormItem :label="$t('名称:')" prop="itemName">
<Input v-model="itemItem.itemName" clearable placeholder="Enter something..."/>
</FormItem>
<FormItem :label="$t('模板名称:')" prop="type">
<Select v-model="itemItem.type">
<Option :value="0" :key="0">{
{$t('客户端')}}</Option>
<Option :value="7" :key="7">{
{$t('客户端(主动)')}}</Option>
</Select>
</FormItem>
<FormItem :label="$t('类型:')" prop="type">
<Select v-model="itemItem.type">
<Option :value="0" :key="0">{
{$t('客户端')}}</Option>
<Option :value="7" :key="7">{
{$t('客户端(主动)')}}</Option>
<Option :value="12" :key="12">{
{$t('ipmi客户端')}}</Option>
</Select>
</FormItem>
<FormItem :label="$t('键值:')" prop="itemKey" >
<Input v-model="itemItem.itemKey" placeholder="Enter something..." clearable/>
</FormItem>
<FormItem :label="$t('信息类型:')" prop="value_type">
<Select v-model="itemItem.value_type">
<Option :value="3" :key="3">{
{$t('数字')}}</Option>
<Option :value="1" :key="1">{
{$t('字符')}}</Option>
<Option :value="0" :key="0">{
{$t('浮点')}}</Option>
<Option :value="2" :key="2">{
{$t('日志')}}</Option>
<Option :value="4" :key="4">{
{$t('文本')}}</Option>
</Select>
</FormItem>
<FormItem :label="$t('单位:')" prop="units" >
<Input v-model="itemItem.units" placeholder="Enter something..." clearable/>
</FormItem>
<FormItem :label="$t('数据更新间隔(秒):')" prop="delay" >
<Input v-model="itemItem.delay" placeholder="Enter something..." clearable/>
</FormItem>
<FormItem :label="$t('历史数据保留时长(单位天):')" prop="history" >
<Input v-model="itemItem.history" placeholder="Enter something..." clearable/>
</FormItem>
<FormItem :label="$t('趋势数据存储周期(单位天):')" prop="trends" >
<Input v-model="itemItem.trends" placeholder="Enter something..." clearable/>
</FormItem>
<FormItem :label="$t('描述:')" prop="description" >
<Input v-model="itemItem.description" :autosize="true" type="textarea" placeholder="Enter something..."/>
</FormItem>
</Form>
</slot>
</Modal>
</div>
</template>
<script>
import TpTable from "../../../components/locale-components/tp-table/tp-table";
export default {
name: "check_item",
components: {TpTable},
data:function(){
return {
//==================终端显示start==================
title:'',
itemModelShow :false,
itemItem: {
id:'',
itemIp: '',
itemName: '',
type: '',
itemKey: '',
value_type: '',
units: '',
delay: '',
history: '',
trends: '',
description: '',
createTime: '',
uuid:''
},
item_params:{
id: 'item_tab',
index: true,
loading:true,
checkBox: true,
url: '/ssa/java/asset/vm/itemList',
type:'table',
ajaxType:'get',
data:{},
add_btn:true,
del_btn:true,
cols: [
{
title: '模板名称',
key: 'applicationName'
},
{
title: '检查项名称',
key: 'itemName'
},
{
title: '键值',
key: 'itemKey'
},
{
title: '类型',
key: 'type',
render: (h, params) => {
return h('div', params.row.type == 0 ? '被动' : '主动');
}
},
{
title: '信息类型',
key: 'value_type',
render: (h, params) => {
if(params.row.value_type == "1"){
return h('div', '字符');
}else if(params.row.value_type == "2"){
return h('div', '日志');
}else if(params.row.value_type == "3"){
return h('div', '数字');
}else if(params.row.value_type == "4"){
return h('div', '文本');
}else if(params.row.value_type == "0"){
return h('div', '浮点');
}
}
},
{
title: '单位',
key: 'units'
},
{
title: '数据更新间隔',
key: 'delay',
render: (h, params) => {
return h('div', params.row.delay +"(秒)");
}
},
{
title: '历史数据保留时长',
key: 'history',
render: (h, params) => {
return h('div', params.row.history +"(天)");
}
},
{
title: '趋势数据存储周期',
key: 'trends',
render: (h, params) => {
return h('div', params.row.trends +"(天)");
}
},
{
title: '描述',
key: 'description'
},
{
title: '操作',
key: '操作',
width: 200,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '详情'),
h('Button', {
props: {
type: 'warning',
size: 'small'
},
on: {
click: () => {
/*this.itemItem= {
id: params.row.id,
itemIp: params.row.itemIp,
itemName: params.row.itemName,
admin: params.row.admin,
type: params.row.type,
remark:params.row.remark,
createTime:params.row.createTime,
uuid:params.row.uuid
};
this.title="修改";
this.itemModelShow =true;*/
}
}
}, '修改')
]);
}
}
]
},
item_ruleValidate: {
itemIp: [
{ required: true, message: '终端IP不能为空', trigger: 'blur' }
]
},
//==================终端显示end==================
}
},
methods: {
//=========